Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cotton

Progress scroll animation when used with dynamic/cloned element and ScrollTrigger

Go to solution Solved by GreenSock,

Recommended Posts

Hello

 

I've set up a ScrollTrigger that clones an element as it's wrapper hits 200px below the window (with thanks to @Cassie)

 

 

 

I'm trying to add a progress bar that shows how far you've scrolled down the cloned element and once the active element has ended it would reset the bar and begin showing the scroll progress of the next (cloned/active) element. So essentially, each cloned element is a page and as a new page comes into view the progress bar is affected/reset/ToggleClass etc.

 

I've tried creating a gsap.utils.toArray to capture all the cloned elements with a ScrollTrigger.create inside it although I'm not sure if this is correct or efficient. The onLeave etc doesn't seem to be having any affect on the progress bar so something must be up.

 

Any ideas?

See the Pen rNJwwEO by Cottonltd (@Cottonltd) on CodePen

Link to comment
Share on other sites

  • Solution

I noticed several problems:

  1. You're creating a whole new ScrollTrigger and animation every time any section enters the viewport. So if you scroll backwards and then forwards again, you're creating duplicates that are all trying to control the same thing. Definitely bad for performance and memory. 
  2. When you create a new section, you're not adding any ScrollTriggers to it that would control the progress bar. 
  3. I'm not sure what your "toggle" class is for, but be careful about simply calling classList.toggle("toggle") in an onRefresh because that gets called on DOMContentLoaded, on load, on visibilitychange, and when the window resizes. That looks problematic to me but I don't know what your goal is there. 
  4. Your "end" value for the ScrollTrigger was using the default of "bottom top" but I assume you want "bottom bottom", otherwise you'll have start/end values overlap between sections.

I assume you wanted something more like this: 

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

  • Like 2
Link to comment
Share on other sites

Brilliant, thanks again Jack.

Really blows my mind how responsive, knowledgable and patient this forum is.

 

The class toggle was to make the bar, which will be black and white on the full site,  look as though it fills in black from left to right and then class toggle would switch the background colours and look to fill in white left to right etc etc.

 

I've tried to demonstrate it in this pen but obviously the toggle is not in the right place because it's applying the it to all the progress bars. Should I create a new scrolltrigger within that function just for this effect?

 

See the Pen yLvXjJy by Cottonltd (@Cottonltd) on CodePen

 

Link to comment
Share on other sites

5 minutes ago, cotton said:

he class toggle was to make the bar, which will be black and white on the full site,  look as though it fills in black from left to right and then class toggle would switch the background colours and look to fill in white left to right etc etc.

 

I've tried to demonstrate it in this pen but obviously the toggle is not in the right place because it's applying the it to all the progress bars. Should I create a new scrolltrigger within that function just for this effect?

I read that a few times but I'm still pretty lost about what you're trying to do, sorry. 🤷‍♂️

 

6 minutes ago, cotton said:

Really blows my mind how responsive, knowledgable and patient this forum is.

The only way we could do that is through the support we get from Club GreenSock members like you. 🙌

Link to comment
Share on other sites

How to explain...

 

I've done a pen with both states included as separate bars.

See the Pen jOZwxZP by Cottonltd (@Cottonltd) on CodePen

 

In the final site this would be a single bar but the class toggle would switch the style. So a black bar on a white background would grow to 100%, left to right then as the next section comes in the class would switch and it'd then look to be a white bar growing from left to right.

 

Essentially I'm just trying to cover up the value jump back to zero and make it look more continuous.

 

Link to comment
Share on other sites

So you want to switch on each successive section? So one uses black => white, and the next uses white => black, back and forth? 

Link to comment
Share on other sites

3 minutes ago, GreenSock said:

So you want to switch on each successive section? So one uses black => white, and the next uses white => black, back and forth? 

 

Exactly that, so it could either have two progress bars positioned correctly and one is hidden and the other displayed, or a class toggle that switches the colours around on a single element.

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.
×