kalimschka

Thanks again for the quick replies! Setting the position parameter works fine in my project and since I got a whole lot of different tweens it offers better readability than adding an empty tween between most of of them. But adding an empty tween at the end of my timelines also gives some nice extra breathing space! Also thank you for reminding me about the `end` value. Now my animations look way smoother.

@elegantseagulls Is there something like .addPause() for my scrollTrigger elements? I want to give the animations some "breathing space" before being able to animate the next one. I need some extra scrolling space or delay which the user has to scroll without changing the layout or the animations themselves. F.e 300px additional scrolling height between every of those animations .from("#schlaf", { opacity: 0, y: 200 }) /* ADD 300px scrolling delay here */ .from("#angst", { opacity: 0, y: 200 }) /* ADD 300px scrolling delay here */ .from("#depression", { opacity: 0, y: 200 }); /* ADD 300px scrolling delay here */

Thank you very much. Sometimes less is more!

I've just updated my Pen, deleted some code and updated the syntax. What I want to to: First animate the headline on scroll (everything else isn't shown yet), then animate the block text and then the orange text. After that the three columns should be animated successively. Each column should fade in and then the percentage number should increase. Every element should stay pinned to whole time. I hope that it is better to understand now.

Hi, I want to create multiple sections where each contains a headline, a short intro text and then a different type of animation, ending with some reference numbers. Each section should be pinned and the content inside should be scrubbed. So far I only got the general Intro Section and the first Content section which currently does not scroll properly. Could someone help me fix the Codepen and maybe add increasing the numbers while scolling? Any help would be much appreciated!