[Kill and reinit on resize - what am I doing wrong?]

Thank you! I didn't know about the option to clear the timeline

[Kill and reinit on resize - what am I doing wrong?]

const marquee = {
  $track: $("[data-places-track]"),
  tl: gsap.timeline({ repeat: -1, yoyo: true, paused: true }),
  init: (app) => {
    marquee.initAnimation(app);
  },
  initAnimation: (app) => {
    const $trackWidth = marquee.$track.outerWidth();
    marquee.tl.to(marquee.$track, {
      x: -($trackWidth - app.windowWidth),
      duration: 185,
      force3D: true,
      ease: "linear",
    });
    marquee.tl.play();
  },
  killAnimation: (app) => {
    marquee.tl.kill();
    marquee.initAnimation(app);
  },
};

I have a timeline I'm trying to kill and reinit on resize. Because I need the updated width of the container I'm animating on the x-axis. Percentages doesn't work here. The killAnimation() function is being run on window.resize. The animation stops but it wont start again when I'm running initAnimation() again after the kill. What am I doing wrong here?

[Kill scrolltriggers by ID]

@Cassie hi! So that doesnt work, if i console.log paths i only get one scrolltrigger. See example here:

See the Pen jOGEdEB by helleholmsen (@helleholmsen) on CodePen

[Kill scrolltriggers by ID]

Hi everyone! I'm working on a page where a want an animation to happen when the user navigates to a certain page on my website, but kill it on other pages. I'm running this code when the user navigates to the site where I want the animation to happen:

 

  logoAnimation: (app) => {
    app.logo.hasBeenAnimated = true;

    const paths = document.querySelectorAll("#logo .path");

    paths.forEach((path, i) => {
      const index = i / (paths.length - 1);
      gsap.to(path, {
        scrollTrigger: {
          id: "logoPaths",
          trigger: "body",
          scrub: 7,
          start: `${index * 10}% top`,
          end: `${index * 60 + 60}% bottom`,
        },
        rotate: gsap.utils.random(-25, 25),
        opacity: 7,
        ease: "circ.out",
      });
    });
  },

and this code when a user navigates to another page:

    if (app.logo.hasBeenAnimated) {
      let pathsTrigger = ScrollTrigger.getById("logoPaths");
      pathsTrigger.kill();
    }
  },

And that's not working. The only thing that works is to kill all ScrollTrigger animations, but I just want to destroy this one. How can I do that?

[ScrollTrigger and batch]

Hi everyone!

 

So I'm working with batch in my scrolltrigger animation, and it works fine, but i want the animation duration to be based on the scrub, NOT a normal duration, how can i do that? This is my code:

gsap.set(processItems, { filter: "blur(20px)" });

ScrollTrigger.batch(processItems, {
  start: app.isDesktop ? "top 60%" : "top 80%",
  end: "bottom 10%",
  scrub: 1.5,
  onEnter: (batch) => {
    //the duration of the animation here should be based on the scroll scrub
    gsap.to(batch, { filter: "blur(0px)" });
  },
});

 

[Scale images based on mouse distance]

Cool, but a little more specific: is the duration of the tween for the image 0 and the scale property is just the distance from the mouse? 

[Scale images based on mouse distance]

I want the same effect achieved here:

https://www.davidwilliambaum.com/?fbclid=IwAR1LL0ufo4y4rVcFJc9oNKZQuLc2MxuNgG6gLwCz7EGZZEh7ux2QBD6yZTs

 

So the images scales up and down according to the mouse position. How can I do this with gsap?

Thanks!

[animate to the original position without knowing the value]

@PointC sorry, this is what I'm trying to do!

I know that I can use a timeline and reverse it, but what if its inside an each function?

 

      $(app.$item).each(function() {
        gsap.set($(this), {
          opacity: 0,
          scale: 0,
          top: Math.floor(Math.random() * 140) + "%",
          left: Math.floor(Math.random() * 140) + "vw",
        });
        gsap.from($(this), 2, {
          opacity: 0,
          scale: 0,
          top: ????,
          left: ????,
          ease: "cubic.inOut",
        });
      });

 

[animate to the original position without knowing the value]

How can I animate back to the original values without knowing the value? 

Lets say my code looks like this:

gsap.set('div', {
   top: Math.floor(Math.random() * 140) + "%",
   left: Math.floor(Math.random() * 140) + "vw",
 });

 

Now in another function I just want to animate this div back to its original value (without knowing the original value) and remove the inline styles when the animation is done. 

[Different widths - same duration]

Thank you @Shaun Gorneau the last one with the text was exactly what I needed!

[Different widths - same duration]

Is it possible?

I have many divs with text that have different width. I want them to move at the same animation speed. This is my code:

 

    startRolling: function($text, $wrap) {
      let duration = $wrap.width() / 40;
      TweenMax.to($wrap, duration, {
        x: -($text.width()),
        ease: Linear.easeNone,
        repeat: -1
      });
    }

 

So this doesn't work, and setting the duration manually to for instance .9 obviously doesn't work.

 

Thanks!

[Responsive SVG's - unwanted borders when animating]

Hi! macOS Sierra, version 10.12.6. In Chrome, newest version. 

It appears

See the Pen eGmLoB by helleholmsen (@helleholmsen) on CodePen

as well 

[Responsive SVG's - unwanted borders when animating]

See the Pen eGmLoB by helleholmsen (@helleholmsen) on CodePen

 

There seems to appear a light grey border over the animation when I'm animating a responsive SVG. Any fix?