Restarting tweens/progress(0) and play

[Daniel Hult]

Hey,

Im making a slideshow with Flickity and animate each slide with gsap. The gsap code is in modules, so I export a timeline from each module like so:

 

export const tl = gsap.timeline({
    paused: true,
});

tl.to('.some-element', {
    opacity: 1
})

Then importing them like so and storing them in an array:
 

const one = () => import('./timelines/one');
const two = () => import('./timelines/two');
const three = () => import('./timelines/three');
//.....


const modules = [one, two, three, four, five, six, seven, eight, nine, ten];

And then in the flickity slideshow I've used their "change" callback to run the correct timeline when I change slide. Left a comment in the code below to show where Im confused about it not working.
 

change: () => {
  if (index >= modules.length) {
    index = 0;
  }

  modules[index]().then((module) => {
    if (module.default) return module.default();
    
    //If I console log something, it console.logs everytime, so it is running
    //Why isn't this setting the progress to 0 and starting again?
    module.tl.progress(0).play();
  });

  index++;
},

Im expecting to go from e.g slide1 to slide2, then if I go back to slide1 - the timeline should  play again from the beginning. I want that for each slide.

 

See live site here:
https://akershusenergi.netlify.app/

(Just click on the page and use left/right arrow keys to trigger change callback)

Am I doing something wrong?

[ZachSaucier]

Hey Daniel. It's a little hard to tell what's going on given your setup but I think the issue is that a new timeline is being created each time due to the modules[index](). So the second time it's called the opacity is already at 1 so the new animation doesn't look like it's doing anything because the start and end values are the same. You should create all of the timelines once at the start then can use .restart() (or what you have) to play them from their beginning each time.

 

If that's not the issue can you please create a demo that we can edit using something like CodePen or CodeSandbox?

[Daniel Hult]

Yes, that was indeed the issue. I had to change my import logic to have all the timelines available, and then use them accordingly like you said.

Thank you for the reply!