fromTo stagger issue

[thatdevguy]

Hi everyone,
My goal was to make an animation that looks like steam coming out of a coffee cup. I got most of the animation down but I'm having an issue with the start of the animation. I would like each svg to be hidden until the animation starts for that specific one. Originally I wanted to have them fade in and then out again but it seems really complicated to have the opacity go from 0 to .7 and then back to 0 so if I can just get the animation pop up when its time to animate like it does on the second round of animations that works well too.

 

If anyone can give me a push in the right direction here that would be awesome.

See the Pen bGeNBBR by thatdevguy1 (@thatdevguy1) on CodePen

[ZachSaucier]

Hey thatdevguy and welcome to the GreenSock forums.

 

There's a lot of ways to handle this sort of thing depending on how exactly you want it to behave. If you want the animation to start mid way it might make sense to set the progress forward (you might also notice some other subtle code improvements I made):

See the Pen LYZEbqG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you wanted to animate from an opacity of 0 to 0.7 then back to 0 you could create a timeline and sequence the tweens (one for the movement, two for the opacity so three in total). Or you could use a timeline with one for the movement and one for the opacity using a SlowMo ease with the last parameter as true (see the ease visualizer to see how that looks).

[thatdevguy]

Thanks so much for this. It's exactly what I needed. Also thank you for the subtle code improvements too
 

As for the timeline to achieve getting a fade in / out animation. My original approach was going to involve 3 timelines but I started to get confused because I wasn't sure how to create a staggered timeline properly. I guess the way that the stagger handles each animation has me wondering how you add a timeline to each svg.

I think I need to read a bit more about staggered animation!