Stagger/delay between many scrolltrigger elements on full page

[JERA]

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.

See the Pen gOQyWOE by mcb-jra (@mcb-jra) on CodePen

[mvaneijgen]

Hi @JERA have you seen the ScrollTrigger .batch() function. It will require some rewriting of your code, but it seems like the perfect fit. 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

[JERA]

@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

[mvaneijgen]

Something like this, as I stated it will require a rewrite, because you were creating a ScrollTrigger for each element and here you have to add them all to the batch. In the on enter, you can of course use a timeline, but I think you need to do all the config in the batch. I'm not sure how it will look precisely, but this could give you a head start. 

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Hope it helps and happy tweening! 

 

See the Pen poQBxjg?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[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]

Sorry, I couldn't tell you. I'm personally of the mind that it is better to fix issues as they arise instead of focusing on optimising things that are not even an issue yet. Maybe one or the other is better if you animate like 10.000 elements, but if you only ever have 1000, the optimisation will be negligible, so why worry about it?

 

Otherwise create the amount of elements you're going to use an do some tests. If you have an issue they will be easier to fixed. Hope it helps and happy tweening!  

[Cassie]

The difference isn't a perf thing - you can use gsap.utils.toArray if you need an array rather than a nodelist.

Depends what you're after really -

 

Arrays are most useful because they come with a ton of built-in methods and properties like length, push, pop, forEach, map, filter, etc whereas NodeLists only have only a limited number of properties and methods, like length, bracket notation for accessing items (nodeList[0]), and for loop iteration