Jump to content
Search Community

Juc1

Members

  • Posts

    52

  • Joined

  • Last visited

 Content Type 

Posts posted by Juc1

    Click events

    in GSAP

    Posted

    @ Zach for the second one = 

    See the Pen LYEPxKv by Juc1 (@Juc1) on CodePen

     I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but how do I say run the timeline again (play and reverse) for each click ?

    Click events

    in GSAP

    Posted

    Hi all,

     

     Any ideas please what I am missing ? ?

     

    codepen # 1

     

    I want each click to alternate between - click 1 play the timeline, click 2 reverse the timeline, click 3 play the timeline etc. It is close except that the first click does nothing.

     

     

    =======================================================================

     

    codepen #2 

     

    I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but further clicks do nothing. 

     

    See the Pen LYEPxKv by Juc1 (@Juc1) on CodePen

     

     

    Thanks...

     

     

     

     

     

     

    See the Pen eYYaLwd by Juc1 (@Juc1) on CodePen

    Text fill on hover

    in GSAP

    Posted

    Hi all,

     

    I forked Mikel's codepen from 

     

     

    When my SVG is a rectangle the 3 second duration works ok =

     

    See the Pen KEYeNp by Juc1 (@Juc1) on CodePen

     

     

    But when my SVG is text, the 3 second duration seems to be ignored =

     

    See the Pen EMJeWx by Juc1 (@Juc1) on CodePen

     

     

    Any ideas please why the duration does not work for the text?

     

    Thanks...

    repeat / repeatdelay

    in GSAP

    Posted

    Hi all,

     

    Suppose my timeline has various events adding up to say 12 seconds - to wait 8 seconds after the last event and then begin the timeline again. I can use 

    var tl1 = new TimelineMax({repeat: -1, repeatDelay: 8}),

    but can I instead say something like "run the timeline every 20 seconds" so suppose the timeline is 12 seconds long it would run at seconds 0 -12 then again at 20 - 32 then 40 - 52, then 60 - 72 etc

     

     

    Thanks...

    See the Pen EgjpYa by Juc1 (@Juc1) on CodePen

    var not moving (newbie)

    in GSAP

    Posted

    ...7.2 x 7 has nothing to do with pixels. It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels.  If you take that SVG and put it into your div (called square) which is 48px, the SVG is going to expand to 100% of its parent so the SVG is now 6.67 times bigger...

    @PointC ok thanks this was the bit I was not getting "It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels" - I read this about Viewport (which I think is not declared in a responsive SVG) but I did not know the same applied to Viewbox.

     

    I have kept my original codepen to remind myself how not to do it so...

     

    Try this little experiment. Go back to your CodePen and change the size of your containing div to 7.2px wide instead of 48px and watch what happens. You'll see the correct 100px movement on x followed by 50px on y. (but it will stay at original size)

     

    See the Pen GoZzRB by Juc1 (@Juc1) on CodePen

     

    After that - just for fun - remove the containing div and watch how huge that rectangle gets.

     

     

    See the Pen zrqyVB by Juc1 (@Juc1) on CodePen

     

    Anyway it is much clearer now - thanks for your help and patience  :)

    • Like 1

    var not moving (newbie)

    in GSAP

    Posted

    The thing to remember about SVGs and controlling them is that they operate in their own little coordinate world governed only by their viewBox. Unless you tell it otherwise, an SVG is going to expand out to 100% of its parent. 100px inside an SVG may not necessarily appear as 100px on your screen. 

     

    So... if you make an SVG that is 100px by 100px with a 10px by 10px child rectangle inside it, but you put the SVG into a parent div that is 1000px by 1000px, your SVG would expand out to 1000px and your child rectangle (as you see it on the screen) would appear to be 100px by 100px. It's relative to the SVG - not the screen.

     

    In your case, your 7 by 7 SVG expands out to 48px wide - nearly 7 times its starting size.

     

     

    @PointC that is all very helpful thank you - the one thing I am missing is do you mean that my Viewbox ="0 0 7.2 7" defines the size of my SVG as 7.2 x 7 pixels? If so I guess I misunderstood the meaning / purpose of "Viewbox".

     

    Thanks...

    var not moving (newbie)

    in GSAP

    Posted

    @ PointC ok thanks so when you said before "the original square is only 7x7 pixels" 

     

     

    Hi Juc1  :),

     

    This is the size of your SVG viewBox - 7.2 x 7

    viewBox="0 0 7.2 7" style="enable-background:new 0 0 7.2 7;" xml:space="preserve">

    This is the size of the child rectangle that you are animating: 5.5 x 5.5 positioned at x:0.8 and y:0.8 inside the viewBox

    <rect x="0.8" y="0.8" class="st0" width="5.5" height="5.5"/>

    :)

     

     

    @ PointC yes I get that but then how did you get from this to saying that "the original square is only 7x7 pixels"?  

     

    I could be wrong but I thought that the Viewbox was like a graph / map on which the svg is drawn so if the graph is 7.2 x 7 units then a rectangle of 5.5 x 5.5 units takes up 5.5 / 7 = about 78% of the graph area. I am not sure where the pixels come in to this.

     

    Thanks... 

    var not moving (newbie)

    in GSAP

    Posted

    Hi again Juc1  :),

     

     

    As far as your new problem goes, you're seeing some scaling on the calculations because the original square is only 7x7 pixels...

     

    @PointC or anyone - just getting back to this - where in my SVG file (made in AI) does it say my square should be 7 x 7 pixels?

     

    Thanks... 

    var not moving (newbie)

    in GSAP

    Posted

    Thanks @ PointC and Diaco - I was hoping to target the svg child element. But anyway another thing - in my updated codepen (same url as above) I want to say move 100px to the right and then 50px down - but the result seems to be a lot more than 100px and a lot more than 50px. Am I doing something wrong?

     

    Thanks...

    var syntax (newbie)

    in GSAP

    Posted

    Nothing is wrong, but you have to include jquery as a library in your code pen..

    Click on Settings , then Javascript, second tab i think, then you click on quick add drop down and select Jquery, then your bouncy animation will work...

     

    hope this helps

    @alwayz

     

    @alwayz ok it works now, thanks! Can I add jquery by default so I don't have to keep adding it for each new pen? - I can't see where to do that in the codepen settings. 

     

    u2wVarS.jpg

    Text Opacity

    in GSAP

    Posted

    @ Carl the link problem was in Windows 8 and several browsers - but on a different Windows 8 machine it works fine so the problem must be with my machine.

     

     

    Anyway SplitText looks good, thanks...

    Text Opacity

    in GSAP

    Posted

    Anyway another thing is that the first time a codepen (yours or mine) loads in a new browser the unstyled text appears briefly (ie less than one second) before the animation begins. Do you know what I mean and if so is it possible to stop the unstyled text showing?

     

    Thanks...   

1
2
3
Page 2 of 3  
×
×
  • Create New...