How to control animation when page is refreshed mid scroll?

['L']

OK, this feels like it should be super simple, but for the life of me, I can't figure it out - needless to say, I'm a noob!

I have a hero section at the top of my page, onload it animates in a headline and paragraph 1. 

On scroll, paragraph 1 animates out, paragraph 2 animates in (headline remains).

 

The animations are currently on 2 separate timelines; the 1st plays without user interaction, the 2nd is controlled using scrollTrigger. FYI I'm also using 'layered pinning from bottom' (courtesy of Greensock/Codepen - lovely, thank you!).

 

The problem - if the page is refreshed 'mid scroll', both paragraphs are visible.

 

How do I ensure only 1 paragraph is visible at a time? Callback, if/else statement, check scroll position, a master timeline controlled by scrollTrigger...witchcraft??  I feel like there's an obvious/accepted method I'm overlooking - can anyone point me in the right direction?

 

I haven't included a codepen, as I can't replicate the issue due to the scroll position being reset when the page is refreshed. Plus, my setup probably isn't right to begin with - hence this post...

 

Any help would be greatly appreciated, thanks!!

[ZachSaucier]

Hey L and welcome to the GreenSock forums.

 

1 hour ago, 'L' said:

I can't replicate the issue due to the scroll position being reset when the page is refreshed

You can still create a minimal demo that we can run locally. Or you can use CodePen's debug mode by replacing /pen/ with /debug/ in the URL. A minimal demo is necessary as it depends on how you have things set up. Please make the pen as minimal as possible (perhaps removing the layered pinning stuff if it's not relevant).

 

1 hour ago, 'L' said:

my setup probably isn't right to begin with - hence this post...

Hard to help with that if we can't see your setup  

['L']

Thanks for your response Zach - sorry about the missing pen    

Here's what I've got (more or less).  I kept the layered pinning, as it replicates what I'm working with. 

 

See the Pen ZEWdBeb by Meanderling (@Meanderling) on CodePen

[ZachSaucier]

That's actually a logical problem. Because in that situation (the page is scrolled down to where text2 should show instead of text1 and you refresh the page) you are trying to both fade in text1 (because the page loaded) and hide it (because of the ScrollTrigger). 

 

To fix this you could:

• Wait to create the ScrollTrigger (and animation) until the intro animation has completed. But this could cause a jump in state if the user is scrolled down and refreshes.
• Remove one or the other animation.
• Don't play the first animation if the user is scrolled down on load. I'd probably do this.
  

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

['L']

Exactly! Thanks for the response - I knew there were several ways to do it, but wasn't sure which was best/preferred or if there was something in gsap/scrollTrigger to cover it.  I like your method best, ie don't play the first animation if the user is scrolled down on load.

 

Thanks for your help, much appreciated!!