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

[usr1931990 1 Likes (Newbie)]

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?

[SteveS 140 Likes (Specialist)]

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.

[GreenSock 16,987 Likes (Superhero)]

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. 

[usr1931990 1 Likes (Newbie)]

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