How to Dynamically Control Animation Durations Using dataset ?

[issam.seghir]

I'm trying to achieve a specific animation behavior using GSAP and ScrollTrigger. I have a list of elements with the data-aos attribute set to various values such as "fade-up" and "fade-down." I want to control the animation duration for each element using the data-speed attribute.
 

const fadedown = gsap.from('[data-aos="fade-up"]', {
    opacity: 0,
    y: -50,
    ease: "power2.inOut",
    duration: (index, element) => {
        return element ? element.dataset.speed ?? 1 : 1;
    },
});
console.log(fadedown.vars.duration);

Expected Behavior: 
fadedown.vars.duration =  1 // or any value in dataset.speed

Actual Behavior:
fadedown.vars.duration =  "(index, element) => element.dataset.speed ?? 1"

See the Pen PoVwoEq by issam_seghir (@issam_seghir) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[issam.seghir]

GSAP How to Dynamically Control Animation Durations Using dataset ? (codepen.io)

 

[mvaneijgen]

ScrollTrigger has no stagger property check the ScrollTrigger docs for all properties that can be used inside the ScrollTrigger object. 

 

As you can see in your example only one ScrollTrigger gets created, to fix this you will need to create a ScrollTrigger for each element on your page. You can of course load some dynamic values in these tweens that your get for data attr on your page, but duration is not something that would work for ScrollTrigger. Check out the following video why that logic would not work and how to work with ScrollTrigger:

 

 

What you can do is increase the scroll distance on which your timeline gets played to increase to duration, for this I've used your data-speed attr and changed it so that different elements have different speeds. This value gets set to the end: property of ScrollTrigger (this will use it as a pixel value).

 

Hope it helps and happy tweening! 

 

See the Pen OJdPPxx?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[issam.seghir]

Thank you, I have another question. If I don't use scrub:true, do I still need to add duration? I only want the animation to work when entering, not when entering back. So, I am using toggleActions instead. However, the end position is the same for all elements.

See the Pen vYbEEPZ by issam_seghir (@issam_seghir) on CodePen

 

[GreenSock]

5 hours ago, issam.seghir said:

However, the end position is the same for all elements.

Not sure what you mean by this. Your demo shows them all in different positions. 

Please read the docs to understand the difference between toggleActions and scrub. To answer your question, yes, the duration will affect the animation if you're using toggleActions instead of scrub.