JERA

@mvaneijgen Thanks for the codepen, sorry i have been inactive for a while regarding this. I have one question you might be able to help me with, which I am also going to use in this. Which of these two ways of finding the data-animation element is the best/right one? (I will have a lot of elements, basically all headers, body text etc. so I am looking to get the best performing one.) const elements = document.querySelectorAll('[data-animation]'); elements.forEach(element => { const animationType = element.dataset.animation; applyAnimation(element, animationType); }); or this? gsap.utils.toArray('[data-animation]').forEach(element => { const animationType = element.dataset.animation; applyAnimation(element, animationType); });

@mvaneijgen It's not because I am trying to be lazy, more incompetence to be honest. I don't really understand what I have to do to make this work.. Do I then not use a timeline? If you see an easy way to do this in my code, please let me know

Hello GreenSock forum. I'm currently making a site, and I need your help. The site needs to have different animations on most of the content, so all headers have one type of animation, and standard text another. This is already achieved. But... with so many animations, and all of them firing at the same time when they come into view, it looks very odd. How do I go about adding a delay between them so they don't all just fire at the same time, if they are close to each other in the view? I tried the stagger functionality, but it doesn't seem to work, I guess because GSAP doesn't know they are "together?" I want to do something like this: ScrollTrigger fires -> Header animation fires -> short delay/stagger -> next animation fires (of course only if that ScrollTrigger only also fired already..). But I am just trying not to fire the whole stuff at the same time when scrolling down the site. Currently it looks very confusing with many elements. The Codepen of course is not designed like my site, but my site has many elements in the same view.. I attached a Codepen of what I have currently. If anyone could lead me in the right direction I would be very happy.

I am very new to this, and I don't really understand how to approach this honestly.. I'll try to explain what I'm trying to do. Standard page above and below this where you vertically scroll down and then you reach this section. Slide 1 is already shown. When scroll past center -> snap to slide 2 while pushing slide 1 out the top and setting it's opacity to 0. Slide 2 is now shown. When past center -> snap to Slide 3 while pushing slide 2 out of the top, and setting its opacity to 0. When the slides animate "in" they come out the way you scroll if that makes sense, and the opposite when disappearing. Scroll down, slide comes from the bottom and disappear out the top ( at the same time).. Scroll up, slide comes from the top and disappear out the bottom. ( at the same time).. Kind of like "swiping" down a full screen section at a time. where two animations are happening at the same time.