filippos Posted January 13, 2023 Share Posted January 13, 2023 Hi, I have landing page with many advanced tweens for example frame animation like AirPods Pro, 3 horizontal tweens with pictures and much much more. When page is loading for the first time it looks normal and the content page loads properly. But when I refresh page when isn’t on top, tweens don’t load well and page content overlaps to each other. Is this a known problem? For business reasons I can't share the code here and it’s too long Link to comment Share on other sites More sharing options...
SteveS Posted January 13, 2023 Share Posted January 13, 2023 Can you provide at least a video of the issue? Are you saying when the page loads already scrolled their is a problem? Link to comment Share on other sites More sharing options...
filippos Posted January 13, 2023 Author Share Posted January 13, 2023 I' sorry but the landing page shows a product that is not published. But I will try to describe the problem as best as possible. It's looks like some animations play in the same time. A lot of tween is scrolltrigger. Look on apple page https://www.apple.com/iphone-14-pro/. For example when I scroll down to the caption - "Pro. Beyond." and refresh. On my site, another animation would also appear at the same time, such as the video at the beginning or something below. I'll try to show you the code for a horizontal animation soon, which usually overlaps another. Link to comment Share on other sites More sharing options...
SteveS Posted January 13, 2023 Share Posted January 13, 2023 Yeah, we need at least the GSAP related code to see what is going on. Without video it's really hard still, but ScrollTrigger issues with reload are fairly regular and fixable. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 13, 2023 Share Posted January 13, 2023 Hi, Have you tried with the History API, more specific with scrollRestoration? https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration https://developer.chrome.com/blog/history-api-scroll-restoration/ Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted January 13, 2023 Share Posted January 13, 2023 Yeah, it's pretty much impossible for us to offer advice without seeing a minimal demo but don't worry - you actually shouldn't include your actual project. It's far better for troubleshooting if you just create the most minimal possible demo with some basic colored <div> elements showing what the problem is. Even if you weren't posting here in the forums, it's probably the single most useful troubleshooting technique I know of - reduce everything down to the absolute basics, then slowly build up from there to get closer and closer to your "real" project...and then when it breaks, you'll see exactly what piece made it break. Also, make sure you're using the latest version of GSAP (3.11.4 right now). 1 Link to comment Share on other sites More sharing options...
filippos Posted January 14, 2023 Author Share Posted January 14, 2023 See the Pen PoBKqmQ by FilipGC (@FilipGC) on CodePen This is an example of my fake horizontal animation. Such an animation oerlaps with others. It looks as if the animations on the page are loading in random order and not where they should be. It looks like thery were pinned too early. I noticed a problem with animations that use pin: true;. What am I doing wrong? Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 14, 2023 Share Posted January 14, 2023 Hm, I don't notice any problem with the CodePen you provided. What am I missing? Here are some tips that will increase your chance of getting a solid answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" Link to comment Share on other sites More sharing options...
filippos Posted January 14, 2023 Author Share Posted January 14, 2023 For clarity. Pen here it works fine, but the same animation in combination with others causes problems. Is it a bad pin or something? Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 14, 2023 Share Posted January 14, 2023 We really can't know what the problem is if we can't see it or inspect anything that actually shows the problem. It could be a CSS issue, a 3rd party library you're using, a logic problem, or a bunch of other potential things. Can you please provide a minimal demo that shows the problem? You said it breaks in combination with other pins, right? So maybe add another one to your CodePen and show it breaking(?) Link to comment Share on other sites More sharing options...
filippos Posted January 15, 2023 Author Share Posted January 15, 2023 Ok, look at this. I didin't change anything in codepen. I just refreshed the page when it wasn't at the top. Why now start and end position is in the same place? Link to comment Share on other sites More sharing options...
GreenSock Posted January 16, 2023 Share Posted January 16, 2023 On 1/14/2023 at 6:04 PM, filippos said: Ok, look at this. I didin't change anything in codepen. I just refreshed the page when it wasn't at the top. Why now start and end position is in the same place? I cannot replicate that behavior. Can you please provide very detailed instructions about how to reproduce that in the CodePen you provided? I forked it, went into "debug" mode (to avoid the iframe), scrolled down and refreshed. Worked perfectly every time. Zero problems. What am I missing? What browser and OS are you using? Link to comment Share on other sites More sharing options...
filippos Posted January 16, 2023 Author Share Posted January 16, 2023 I noticed that this behavior is random. I resize and refresh the page on codepen. Nothing else, just a moment ago this error appeared again. The same thing happens to me on the landing page. Most of the time this works fine, but sometimes the timelines get mixed with the scrolltrigger and the animations overlap. I use google chrome on ubuntu linux. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 16, 2023 Share Posted January 16, 2023 Hi @filippos, As Jack points out is impossible for us to help you without being able to reproduce the issue. Perhaps in your setup your ScrollTrigger instances are not created in the order they happen according to regular document flow. Be sure to create them in the specific order the users will see them. Also if you have fluid images be sure to load them all before creating the ScrollTrigger instances, same thing with fonts (sometimes adding a font will change the height of elements, throwing ScrollTrigger calculations off). The pattern is basically that, follow anything in your code that could alter the height of elements after being loaded, and wait for those elements to be fully loaded before creating your ScrollTrigger instances. Hopefully this helps. Let us know if you have more questions. Happy Tweening! 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