How to avoid redunant code using GSAP?

[Sveninyo]

Hello,

I have a general question. How can I avoid redundant code (following DRY principles) using GSAP (especially ScrollTrigger)?

 

For example, the code below works just fine but It repeats 3 times and I don't want that. Isn't it possible to "store" the scrollTrigger information in a variable (since it's always the same) and apply it to the animations? I tried it with ScrollTrigger.create() but that doesn't work.

 

I'm pretty sure this topic is covered already, I just can't find it. Please just point me to it. I can solve it myself!

 

Thank you in advance!

 

gsap.from("#cloud-front", {
    scrollTrigger: {
        trigger: "#rocket-animation",
        scrub: true,
        start: "top 95%",
        end: "top 5%",
        markers: true
    },
    y: 160,
});
gsap.from("#cloud-back", {
    scrollTrigger: {
        trigger: "#rocket-animation",
        scrub: true,
        start: "top 95%",
        end: "top 5%",
        markers: true
    },
    y: 80,
});
gsap.from("#rocket", {
    scrollTrigger: {
        trigger: "#rocket-animation",
        scrub: true,
        start: "top 95%",
        end: "top 5%",
        markers: true
    },
    y: 240,
});

[akapowl]

 

Hello there, Sven.

There are a lot of possibilities for you here.

Since we're in JavaScript land, you could e.g. just set up a function with all the parameters that change from one ST to another and pass those values as arguments while calling the function to create your ScrollTriggers.

A more GSAP-py way would be to just use a timeline here with a scrollTrigger object on the timeline object, and make use of the position parameter, to make all your tweens attached to that timeline start at the same time.

 

Give it a shot, and if you get lost along the way, post back with a minimal demo of the problems you ran into, and we'll be glad to help with your GSAP related questions.

 

For more general tips and tricks, here are two very insight- and helpful articles by @Carl and @ZachSaucier.
 

https://css-tricks.com/writing-smarter-animation-code/

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

 

[Sveninyo]

Hello @akapowl ,
@Carl just told me to make a pen. So here it is:

See the Pen ExONmrJ by Sveninyo (@Sveninyo) on CodePen

He also shared this with me: 

See the Pen vYLvZKY??editors=0010 by snorkltv (@snorkltv) on CodePen

 

This is almost what I want, but just "scrubbable". 

 

Like I said, the my code works fine, I just think it isn't neat.

I will check your links now. Thank you anyway! The support here is world class!

[akapowl]

👍

Looks like you should have all you need then; you'll only need to convert your pen to follow the syntax of that other pen and you should be good to go.

[Rodrigo]

Hi,

 

Indeed @akapowl is right, you have three different GSAP instances with the same ScrollTrigger config in them:

scrollTrigger: {
  trigger: "#container",
  scrub: true,
  start: "top 80%",
  end: "top 20%",
  markers: true
},

So just create a timeline with that config and then attach the individual instances to it, just like in @Carl's example:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#container",
    scrub: true,
    start: "top 80%",
    end: "top 20%",
    markers: true
  },
})
  .from("#box-1", {
    y: 160,
    x:40,
  })
  .from("#box-2", {
    y: 80,
    x: 80,
  })
  .from("#box-3", {
    y: 240,
    x: 80,
  });

That should work in the same way and is less verbose and DRY.

 

Hopefully this helps.

Happy Tweening!

[Sveninyo]

@Rodrigo I added a 0 between curly bracket and bracket }, 0); to make it start at the same time. Now its just like I wanted it! Thank you!

[Rodrigo]

Hi,

 

Glad to hear that is working as expected. That's basically the position parameter you're using there. Check that link in order to learn more about it.

 

Happy Tweening!