Jump to content
Search Community

Restarting tweens/progress(0) and play

Daniel Hult test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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?

  • Like 3
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.
×
×
  • Create New...