fromTo in Timeline, How To Fade Opacity 0, 1, 0

[KevinCon]

Howdy!

 

So I'm trying to sort out an opacity 0 > opacity 1 > opacity 0 for the top to bottom falling animation shown in the CodePen here, my issue is when the tweens restart, it's an abrupt jump to opacity 1 at the top. Ideally, it would start at the top 0 opacity each time, fade In as it starts to fall, then fade back out as it reaches the bottom. I think I'm not fully understanding the nuances of adding to's to the timeline where a fromTo doesn't quite cut it. With fromTo I can only really specify the start & end states, so it either starts opacity 0, or ends opacity 0, can't seem to have it both ways with the change in the middle with the way I've got it setup.

 

Thanks for any help!

See the Pen xxzQZjg by kconsidine (@kconsidine) on CodePen

[mvaneijgen]

Hey @KevinCon welcome to the forum! 

 

That sounds like the perfect use case of yoyo: true. (from the docs https://greensock.com/docs/v3/GSAP/Timeline)

 

Boolean If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the reversed property though. So if repeat is 2 and yoyois false, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyois true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.

 

I had to make a minimal demo myself to better explain it, see the comments in the JS for my notes

See the Pen LYrXxQY by mvaneijgen (@mvaneijgen) on CodePen

 

To implement this in your pen I had to do some tweaking. I've created a timeline of your glitter.

 

See the Pen abKQpEr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Have you ever worked with the stagger property? https://greensock.com/docs/v3/Staggers I would figure this would also work instead of a .forEach() loop. Hope it helps and happy tweening! 

[KevinCon]

Yes, this is perfect!

Thanks so much for the help and getting me pointed in the right direction, appreciate all the info!

 

Very excited to expand my GreenSock repertoire