Leaderboard

I think you might be using an outdated version - that was one line in 2.0.0 that caused issues with some minifiers (like Uglify) that didn't understand ES6 destructuring, so we pushed 2.0.1 which fixed that. Maybe you've got something old cached? I'm pretty sure if you update to 2.0.1, the problem will go away.

I'm kind of confused by what you mean by "how do I run two different classnames at the same time". If the demo below is what you want, let me know if you need help understanding how it works

You dont animate opacity there (in your code). you create elements with only .line-one classname and then animate x/y position. Looks like you need to randomize creation (with different class name), not className animation...

Have you tried setting allowNativeTouchScrolling:false? That's a really old OS and I don't have a device with it currently. Seems to work great in more modern OS versions.

I don't think the problem lies in GSAP or staggered animations. When you click you are using SplitText to break that text into characters and words and then inject 100+ new DOM nodes (with their own inline styles) into the DOM. In addition, there is also logic that needs to run to preserve the styling of nested tags like <span>, <strong> etc. All that has to happen before any animation comes into play and THEN the staggered animation needs to create 100 or so more from() tweens, which involves assessing and recording start and end values. And to make matters a bit worse, by using 3D transforms, each of those 100 or so nodes need to be layerized / sent to the gpu. I suspect that's a lot of work for browsers to do instantly. I'm not quite sure why Safari takes more time than other browsers, but I don't think this is a problem inherent to staggered animations. My guess is Its more related to using SplitText, the amount of text you are splitting and the amount of animations you are creating. My advice would be to split the text before you need to animate it if at all possible.

Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... demo: https://russellgoldenberg.github.io/scrollama/basic/ repo: https://github.com/russellgoldenberg/scrollama info: https://pudding.cool/process/introducing-scrollama/