Animation speed in SVG path animation.

[sabertooth]

Hello all,

 

I need help with an animation of an SVG path.
I have built this project in webflow and use 500vh sticky, to give enough time for the animation to play out while scrolling.
This is working fine on my test project but once I copy it over to the main site the animation is simply to slow. It never reaches the end before the next section overflows my sticky (animated) section. This is quite frustrating, since it seems my settings inside my code are not changing the animation speed at all. 

It would be really nice if someone here could verify my syntax to highlight me some errors, if existing:

 

'''const createAnimation = (elementId, pathId, duration, start, delay = 0, ease, speedMultiplier = 1, autoRotateValue, end) => {
      const timeline = gsap.timeline();
      timeline.to(elementId, {
        motionPath: {
          path: pathId,
          align: pathId,
          alignOrigin: [0.5, 0.5],
          autoRotate: autoRotateValue,
          end: end,
        },
        ease: ease,
        duration: duration,
        delay: delay,
        speedMultiplier: speedMultiplier
      });

      ScrollTrigger.create({
        trigger: ".track",
        start: "top top",
        end: "bottom 130%",
        scrub: true,
        animation: timeline
      });
    };
    
    // Delay for the other animations
    createAnimation("#s1", "#ps1", 1, "top -10%", 0.5, "none", 2, 110, 0.9);

I did not create a codepen because I think it is related to a syntax error. The animation is working fine it is simply to slow and I can not speed it up.
Thank you for your help!

[sabertooth]

Ok, I figured out that it has someting to do with the scrolltrigger. Because if I run it without the scrolltrigger the animation is running perfectly fine. 

Any Idea what could be wrong with my trigger?

[GreenSock]

I noticed a few odd things that are likely unrelated to the "speed" issue: 

1. You've got your tween set up to animate speedMultiplier, as if it was a literal property of the element. I don't think that's a real property you can animate. 
2. You've got start: "top top",  end: "bottom 130%", which seemed a bit odd to me because in order for that to actually work, your trigger element would have to be much taller than the viewport. Otherwise the end would come before the start 🙂

As for the speed issue, since you've got scrub: true, the "speed" will be completely dependent on the distance between the ScrollTrigger's start and end. It basically squishes/stretches the animation to fit perfectly between the start and end position. Please read this: 

https://gsap.com/docs/v3/Plugins/ScrollTrigger#how-does-duration-work-with-scrub-true

 

If you still need some help, please make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to take a peek. The minimal demo can just be a few colored <div> elements - not your real project. 

[sabertooth]

 

Thank you very much. I will try to figure that out. I am still learning and thought I got it all but nothing beats experience. Thank you for your time, trying to help me!