Cleaning up repetitive animations

[tallulahh]

Hello!

I have been researching into timeline organisation as I have a lot of  animation on my current project. I have read that animations should be put into their own functions and then added to the master timeline, cleaning up the code a lot. However my question is specifically about a scrolltrigger animation that I am repeating, as the trigger and the target/selector are different, however the rest of the code stays the same. Any recommendations?

gsap.from(".about .char", {
  scrollTrigger: {
    trigger: ".about",
    start: "top-=50 80%",
    end: "+=100",
    scrub: 1,
    toggleActions: "play none reverse reset"
  },
  rotation: 180,
  transformOrigin: "50% 100%",
  opacity: 0,
  duration: 0.5
});

 

[tallulahh]

Similarly I have created scrollTriggers like this, adding previously created animations:

Quote

ScrollTrigger.create({
trigger: ".hello",
start: "top top",
end: "+=1000px",
scrub: true,
animation: colorToBlue

});

However I am also repeating this code a few times.. is there any way around this?

 

[akapowl]

 

Hello there @tallulahh.

 

In the end, how to best organize your code really depends on what exactly your whole setup looks like.

So giving recommendations based on your code snippets here would not neccessarily mean it will work 100% for you. 

 

What you could likely do though, is e.g. add a certain class to all those elements you want to animate in that certain way, put them in an array based on that class, loop over them and forEach create that certain ScrollTrigger. This way you can create whole systems with logic to your liking.

 

Like in this following example all the elements with the class '.animatable' will be animated in the same way, but with different triggers.

 

See the Pen ef9beb992b8aa9761073f393a2a91426 by akapowl (@akapowl) on CodePen

 

 

First I check if the animatable element has a data-trigger attribute;  if it doesn't, the trigger will fall back to the parent element in the end (the section it is in here). If it does have such an attribute, I check if that atrribute is "self" - in that case the element itself will be the trigger - if it isn't it will be whatever element inside that section has the class the data-attribute is set to.

 

 

 

Here is that same example toned down to simply just always use the parent-element as the trigger ( if maybe the example above was too confusing)

 

See the Pen d341b5f6dbea69ffb1e02f07fda41344 by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote:

Using toggleActions alongside scrub in your ScrollTriggers won't have any special effect - either use one or the other. If you have both set to a ScrollTrigger, it will always be the scrub taking control over the animation.

 

Also, maybe this article on how to write animation code efficiently by @ZachSaucier might be helpful.

 

Hope this helps a bit.

Cheers, Paul