Timeline Scroll animations dissapearing

[weinde]

Hello  

I'm in need of some help with animating elements on scroll... they keep disapearing when I scroll the page... I want them to scroll up and change opacity from 0 to 1 upon scrolled into view...

 

What am I doing wrong?

See the Pen PodqZYB by Weindorfer (@Weindorfer) on CodePen

[GreenSock]

I noticed a few things: 

1. You're looping through each ".kartica", creating a ScrollTriggered animation for each one, but in EVERY one of those timelines you're animating ALL titles, subtitles and descriptions on the entire page. You didn't scope things so that you're targeting just the children of each individual ".kartica" element. So you've got a bunch of competing/conflicting animations.
2. I noticed you've got CSS transitions applied. Never apply CSS transitions to anything that you're animating with JavaScript. It's horrible for performance because whenever the JS sets a property, the CSS will jump in and say "NOPE! I won't let you do that...I'm gonna stretch this change out over time" (and that happens 60 times per second on every animation). 

See the Pen QWVbyvL?editors=0110 by GreenSock (@GreenSock) on CodePen

[weinde]

10 hours ago, GreenSock said:

I noticed a few things: 

1. You're looping through each ".kartica", creating a ScrollTriggered animation for each one, but in EVERY one of those timelines you're animating ALL titles, subtitles and descriptions on the entire page. You didn't scope things so that you're targeting just the children of each individual ".kartica" element. So you've got a bunch of competing/conflicting animations.
2. I noticed you've got CSS transitions applied. Never apply CSS transitions to anything that you're animating with JavaScript. It's horrible for performance because whenever the JS sets a property, the CSS will jump in and say "NOPE! I won't let you do that...I'm gonna stretch this change out over time" (and that happens 60 times per second on every animation). 

 

 

Thank you so much for this.