Jump to content


Problems migrating from Velocity.js: cycling opacity with a TimelineMax

Go to solution Solved by Acccent,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,
so, like my title says, I'm trying to move from Velocity.js to GSAP — the ultimate goal is to be able to properly animate (and rotate) SVG in all browsers, with consistent results.
However, before I do that, I have to change all of my existing code to GSAP's syntax, which, I must admit, isn't suuuper intuitve (imo!). I have to say I was super impressed by the ability to basically reduce what was 7-10 lines with Velocity, to just 2 or 3 in GSAP.
Anyway, the first of the problems I'm facing is this: I have a set of divs which sequentially appear (they are all absolutely positioned in the same place, one of them has opacity: 1 while the others have 0, then it fades out while the second one fades in, etc.)


I don't know if it's a hard problem to solve, maybe there's something obvious that I'm missing, but after spending hours on it I am honestly becoming quite frustrated, especially since it worked before and GSAP was meant to make things easier elsewhere, not complicate this :P (I'm only blaming myself, I'm convinced the framework is super powerful.)


What I'm doing is: I have a TimelineLite that makes a bunch of divs appear, among which the first of the 'cycling' divs. Then it calls a TimelineMax that's meant to cycle the divs infinitely, with repeat: -1.

I spent a lot of time before realising that Timelines start as soon as you create them by default and thought it might be at the root of the problem, but setting paused: true didn't help. I'm using .staggerTo() and there probably is something wrong with my code somewhere, but I can't pinpoint it.


Here is the codepen: (you have to wait for a bit to see that it glitches after it loops)


I'd love some help! :)




I also have another question which I might as well ask here too (to avoid cluttering the forums), even though I haven't struggled with it too much yet so I might find the solution by myself later.


Say I have x elements; I give them all a generate background-color by iterating through them with jQuery's each().

Now, is it possible to create a named TweenMax that will animate all of the background-colors, so that they cycle through the whole color spectrum at the same pace?

(If the first question is solved and this becomes the main subject of the thread, I'll edit and post a different pen)

See the Pen RWZXvo by Accent (@Accent) on CodePen

Link to comment
Share on other sites

Hi Acccent  :)


how about this : 

See the Pen pjWzKM by MAW (@MAW) on CodePen



pls check the SlowMo ease type doc. : http://greensock.com/docs/#/HTML5/Easing/SlowMo/



and for your second question , i think you can find your answer here : http://greensock.com/gsap-1-18-0

if have any problem pls provide a Codepen Demo .

  • Like 2
Link to comment
Share on other sites

I (very quickly) made a small graph to explain the values used. (turns out my maths were slightly wrong, but changing them didn't fix anything.)



edit: ah, using staggerFromTo might help indeed, I'm checking it out. Thanks :)

Link to comment
Share on other sites

  • Solution

Alright I think I understand why it behaved the way it did. My cycling timeline was something like:

 .staggerTo([$a, $b, $c], 2.1, { opacity: 0 }, 10)
 .staggerTo([$b, $c, $a], 3, { opacity: 1 }, 10, 0.6);

And I assumed the order in which I passed the elements would make it understand how I wanted it to behave, that is:

t 00.0 ..... $a fade out
t 00.6 ..... $b fade in
t 10.0 ..... $b fade out
t 10.6 ..... $c fade in
t 20.0 ..... $c fade out
t 20.6 ..... $a fade in

But apparently the order isn't recognised well? and the timeline ended up looking more like

t 00.0 ..... $a fade out
t 00.6 ..... $a fade in
t 10.0 ..... $c fade out
t 10.6 ..... $b fade in

I fixed it by simply writing a more explicit timeline. I tried to use staggerFromTo + SlowMo easing, but couldn't get to a transition that was quite perfectly like the one I'd tuned (which I had spent time on to make look just right). There's as many lines as the equivalent thing in Velocity.js now oh well :P At least it works. And the cycle feature mentioned in your link, Diaco, looks very promising, so I'll have a look at that tomorrow.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.