How can I make the 'scroll up' faster on my animated page?

[Janelle]

I have a very long scrolling page with lots of animation which animates when the user scrolls down and up.  I need to make the 'scroll up' much faster.  I thought maybe if the animation would stop/freeze when a user scrolls up?  I could really use suggestions and instructions.  Thanks.   I'm super new to this.

 

The code pen is a snippet of the page.  I'm guessing if I can get a solution to this then I can apply it to all the other animation.

See the Pen ExKxpWJ by jamoore (@jamoore) on CodePen

[ZachSaucier]

Hey Janelle. Interesting subject. To be clear: you want one speed of animation while the user scrolls down the page (revealing content) and a different (faster) speed when the user scrolls up (hiding content)?

[Janelle]

How about when the user scrolls past the animated blade (section), then when they scroll up that blade becomes static (no animation).  Then when they scroll back down the animation plays.  Is this possible?

[ZachSaucier]

Sorry, that confuses me more. What blade? I see a fish, a person, and some layering (clothing?) on top of the person.

[Janelle]

I'm sorry.   The section with the fish, person, layering and text is what I call the "blade".  In the code it would be <section id="section-transform">.  My challenge is scrolling back up and going thru the animation is lengthy because of the height of the section needed for the animation to cycle thru.  I need users to be able to get back to the top of the page quickly via scrolling.  My thought is if the "blade" can "freeze" at the last transition (see attached screenshot) with a set height for scrolling up it would scroll like a static boring web page.  But scrolling down would be awesome animation.  I'm not quite sure how else to explain.  I'm open to any suggestions.

 

 

[ZachSaucier]

You've got a good bit of code there (too much for me to look through) so I'll help on a conceptual level only:

When you have a scrub animation with pinning, pinSpacing is added making the amount of total scrolling on the page longer (so that the elements can be pinned in place as long as you need them to be but not cover up the later content). 

 

What I'm thinking that you should do is kill the pinned animation for the sections that you want to stay the same once they have completed (in the onComplete). That way ScrollTrigger will remove the added space caused by the pinning. Then you also need to change the scroll position of the page to compensate. Does that make sense? 

 

I haven't looked at your setup, but the above would be easiest if you have individual animations and ScrollTriggers for the sections that you want to remove the space of. 

 

In terms of getting it to animate again when scrolling down again, I recommend just not animating it (since it's a lot of scrolling). If you do want to animate it again you could theoretically add a ScrollTrigger/intersection observer to watch when the element is out of view again and re-setup the animation and ScrollTrigger.

[Janelle]

Ok.  That does make sense.  Thanks for all your help.