Animate a sequence with ScrollTrigger and vue

[FlorianC]

Hello,

First of all, thank you for creating GSAP and GSAP ScrollTrigger which make my life so much easier !!
I have a problem where I need to animate a slideshow on scroll. So I used a scrollTrigger to pin the content to the top of the container. Then I need to animate the line under each category. Once the line reaches the end, it triggers the animation of the image.
The problem is that every line animate at the same time and not as a sequence as it should... I checked every demos but can't find how to make it work...

Sorry for the pen, it's just for code purpose as I get my data from a local json...
thank you in advance

 

See the Pen mdEowov by floriancario (@floriancario) on CodePen

[ZachSaucier]

Hey Florian and welcome to the GreenSock forums.

 

You've got a fair bit of code and a not-working demo. That makes it pretty hard for us to be able to help out. How about you try to recreate the issue more minimally in a demo that recreates the issue? You can use Vue if you'd like to but you don't even need to do that. Focus on the issue at hand. If you do want to still use Vue CodePen has a Vue mode which would be helpful. More info in the video in this thread:

 

[FlorianC]

Ok sorry, should be better now !
I simplified by using just the label and progress bars. So the behavior that I'm looking for is to scrub to complete the progress bar underneath the first "Airport". Once it reaches the end, it goes the next category and so on. Here it doesn't goes to the next one... Sometimes it works but all the lines are animated at the same time even if only the current one is supposed to be animated... 
I use the pin option because this is a section of a landing page and i need to keep it in place while scrubbing to complete the animation.

Thx

[ZachSaucier]

Are you saying that the "new" demo animates all of the lines at the same time for you? For me it only animates the first one.

 

A big issue that I see is that you're using the onComplete of your tween to create more line animations. Why do you feel like you need to do it that way? You should probably be creating all of your animations and ScrollTriggers at the start.

 

I'd set it up to where you have a single timeline and a single ScrollTrigger. Something like this:

See the Pen VwjNLdj?editors=0010 by GreenSock (@GreenSock) on CodePen

[FlorianC]

Oh wow I completely forgot to use the stagger option....
Actually I use the onComplete because I need to animate a background image once the progressBar reaches the 1 scale

[ZachSaucier]

18 minutes ago, FlorianC said:

I use the onComplete because I need to animate a background image once the progressBar reaches the 1 scale

Use the onComplete of the stagger then  

[FlorianC]

Thank you, very helpful !

[FlorianC]

Hello,

I've updated my codepen () because I have another question...
Everything is working fine now that I understood how to use scrollTrigger with stagger etc but when I scroll back up, progress lines are doing good (from scale 1 to scale 0 with stagger). But is it possible to also reverse the timeline called in "changeSlide" which is called on the onComplete of the stagger ?

Thank you 

[ZachSaucier]

Hey Florian. Going forward, ty to remember to use the fork button on CodePen when creating new versions for this forum so that the context of the original demos isn't lost.

 

34 minutes ago, FlorianC said:

is it possible to also reverse the timeline called in "changeSlide" which is called on the onComplete of the stagger ?

Not in the way you have it set up currently. That's because you're creating a timeline inside of the changeSlide function and you don't have a reference to the old timelines. So there's no way you can access them to reverse them when you need to.

 

I'd probably just make those animations a part of the animation that is scrubbed through.

 

Alternatively you could create the animations beforehand so you have references to them and then reverse them when you need to.

[FlorianC]

Ok sorry didn't know about the fork button!
 

But if I make those animations part of the animation that is scrubbed through, they will depend on the scroll level... I kinda want them to happen directly without scrubbing effect !
What do you mean when you say, beforehand ? create the timeline before etc and just a play() in the onComplete ?

[ZachSaucier]

39 minutes ago, FlorianC said:

create the timeline before etc and just a play() in the onComplete ?

Correct. Creating them beforehand gives you more control because you have a reference to them.

 

40 minutes ago, FlorianC said:

I kinda want them to happen directly without scrubbing effect !

That's fine. But given the duration is so short I don't think attaching them to scroll would be too noticeable