Jump to content
GreenSock

usr1931990

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

Recommended Posts

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?

Link to comment
Share on other sites

I'm not 100% sure, but try giving your timelines and tweens IDs and then killing them all selectively. If that doesn't work, you may need to set the properties to null to truly flush out the old values.

Link to comment
Share on other sites

I noticed two potential problems:

  1. You never rewound the timeline to put things back to their starting positions before creating the new animation. So, for example, let's say x starts at 0 and you animate to 500...and then the user resizes the window. Well x is at 500 now, so when you create a new animation that goes to 500, you won't see anything happen because animating from 500 to 500 won't do anything. So you could marquee.tl.progress(0).clear()
  2. When you kill() a timeline, it's dead. Flushed. Ready for garbage collection. Generally it's not good to then try to re-populate and use it again. I'd just create a new timeline in the initAnimation() function. 
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×