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

[Acccent]

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 (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

[Diaco]

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 .

[Acccent]

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

[Acccent]

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

fadecycle
 .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
etc

 
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 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.
 
Thanks!