Jump to content
Search Community

Animation problem after browser window refresh

Mattes test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts


Hello everyone,

I have the following problem. In the page I have a ScrollTrigger animation with an image that runs behind the text. If I scroll to the bottom of the page, reload the browser window, I'm still at the bottom of the page, only the animation starts again. It loses its position after the window is reloaded. Is that normal? This looks like an error.

 

As always, thanks you

See the Pen wvxmqrQ by mattes007 (@mattes007) on CodePen

Link to comment
Share on other sites

Hi Cassie,

thank you for reporting. Imagine the animation like this, I scroll to the bottom of the page, the animation works correctly. But if I now manually reload the browser window and I am still at the bottom of the page after reloading, then the animation is displayed as it was at the start of the page. Animation loses its position after page reload. It's starting over even though I'm at the end of the page.


When I'm at the top of the page, the picture is on the right, I scroll down to the end, and the picture is on the left. Now when I reload the page I'm still at the bottom at the bottom of the page only the picture is on the right like I'm at the top of the page. Difficult to explain. I work with an iMac, Safari, Chrome, Firefox, everywhere is the same problem.

Thanks for the help.

 

Picture 01.jpg = Start of page, animation start

Picture 02.jpg = End of page, animation end

Up to here everything is correct

Picutre 03.jpg = Refresh the Page (in this case the frame)

Picutre 04.jpg = End page and the animation will be start again

The picture should be there like in picture 2

 

 

 

01.jpg

02.jpg

03.jpg

04.jpg

Link to comment
Share on other sites

 

 

Yeah, sorry, I don't have that issue at all. Can't recreate it.

I don't really see how the animation state could persist through browser refresh either. I'd imagine this is a codepen thing? Are you having any issues on a live site at all or is it only on codepen when you refresh the iframe this specific way?

Link to comment
Share on other sites

Ah ok! I set debug mode and I see what's going on

You've got an entrance animation that's playing on page load, on the same element that you're targeting on the timeline.

 

If you check if you're at the top of the page before firing that animation everything works as expected.

See the Pen 40c0843f0ec5d233a49b36b9e24f8e93?editors=0010 by cassie-codes (@cassie-codes) on CodePen

Link to comment
Share on other sites

Ah ok, so safari gives a different initial value 🫠 Oh safari.

https://stackoverflow.com/questions/62709364/why-does-safari-give-a-different-initial-value-for-window-scrolly-on-a-scrolled

I wouldn't say you've built the animation wrong, This is just a bit of a strange edge case I guess, you've got an animation that's playing on page load - but you don't *always* want it to occur on page load.

I'm afraid I don't have the time to go down a big google rabbithole, but the same idea still applies really, there's nothing wrong with the solution - just gotta work out how to get that initial value in safari.

I tried agentur.scrollTrigger.scroll() and pageYOffset but alas, safari just gives us 0 every time.

https://cdpn.io/pen/debug/jOpxEog


Maybe you could try finding the elements position in viewport and then playing the entrance animation based on that result?

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.positionInViewport()

  • Like 1
Link to comment
Share on other sites

Slept on it!

 

Here you go

See the Pen jOpxEog?editors=1010 by GreenSock (@GreenSock) on CodePen

 

You actually still want the element to move to that that position otherwise it's going to be in the wrong place when you scroll back up to the top. It'll shoot right back off the page again as if it never did the entrance animation.

What you actually need is a 0 duration tween so it doesn't visually animate in.

I've added a check for isTop and a little delayed call so GSAP can sort the logic out before the animation kicks in.

 

Got there in the end.

  • Like 1
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...