[Animation speed in SVG path animation.]

 

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!

[Animation speed in SVG path animation.]

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?

[Animation speed in SVG path animation.]

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!

[SVG Image out of center after scaling]

Thank you all for your very helpfull feedbacks. I think I can close this topic now. The SVG image remains now perfectlz centered on all screen siyes.

[SVG Image out of center after scaling]

Thank your for your response @mvaneijgen. I tried to make a codepen but it is not working.
Maybe you can still make any use out of it? I tried to get it to run but it wont work.... I am newbie therefore I would need some help. I hope my problem is only a small one but I am trying to solve it since 3 days no without any success. 

See the Pen WNmOMzb by Peter-Paul-the-sans (@Peter-Paul-the-sans) on CodePen

[SVG Image out of center after scaling]

Hello all, 

 

I am sitting on a scale topic right now. I tried it all and watched every video but came not up with a proper soluting. 
My problem is as follwos: 

I am animating paths on a map SVG-image. at the end I have a "scrolltrigger" set that scales the div element with the map and the paths inside. This is working fine until the screen size changes. Without the scaling, the map image is centered as it should be. Once I scale the div with the map image inside it is not centered anymore. E.g. on a mobile you can only see parts of the map after scaling.  Does anyone here knows a way to ensure the div stays centered (on any device) even after scaling?

Here is the code I am using for that: 

gsap.to('.image-wrap', {
  scale: 1.4,
  duration: 20,
  scrollTrigger: {
    trigger: '.image-wrap',
    scrub: 10,
    start: "bottom -250%",
    transformOrigin: "50% 50%",
  }
})


To center the warpper I use this code. It is working fine, but the scaling sets it off:

 

  // move .image-wrap so that it follows .cen.
  gsap.ticker.add(() => {
    gsap.to(".image-wrap", {
      duration: 0.5,
      x: -gsap.getProperty("#cen", "x"),
      y: -gsap.getProperty("#cen", "y")
    });
  });

 

  // center the wrapper using left and top on initial load and any resize
  window.onload = window.onresize = () => {
    gsap.set(".image-wrap", {
      left: window.innerWidth / 2,
      top: window.innerHeight / 2
    });
  };
}