Share Posted January 24 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 More sharing options...
Solution Solution Share Posted January 24 Hi there - I can't replicate this. Could you give us some steps to recreate the issue. Letting us know the browser you're using could be helpful too. Link to comment Share on other sites More sharing options...
Author Share Posted January 25 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 Link to comment Share on other sites More sharing options...
Share Posted January 25 Kapture 2023-01-25 at 10.34.30.mp4 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 More sharing options...
Author Share Posted January 25 Hi Cassie, here is a video from the live side, here the problem becomes clearer. Link to comment Share on other sites More sharing options...
Share Posted January 25 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 More sharing options...
Author Share Posted January 25 Oh my god, am I stupid. It can't work at all! 🙄😀 1000 thanks Cassie 💐 Link to comment Share on other sites More sharing options...
Share Posted January 25 Not even slightly! It takes some extra eyes to figure things out sometimes. Link to comment Share on other sites More sharing options...
Author Share Posted January 25 Hi Cassie, unfortunately we were happy too soon. According to your workaround, this works in the Chrome and Firefox browsers, but Safari ignores it. Maybe I've built the animation wrong in general? Link to comment Share on other sites More sharing options...
Share Posted January 25 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() 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 26 Hi Cassie, Thank you for your feedback signal. Ah ok, of course it's also a possibility that I always check where the element is! I'll see if I can do that! 1000 thanks 😀 1 Link to comment Share on other sites More sharing options...
Share Posted January 26 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 27 Hi Cassie, what can I say, it works perfectly! 🤩 I just have to implement it somehow so that I can also use it correctly with a mobile viewport. For your trouble 🌹, thanks 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now