Incorrect diaplay of content

[filippos]

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

[SteveS]

Can you provide at least a video of the issue? Are you saying when the page loads already scrolled their is a problem?

[filippos]

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.

[SteveS]

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.

[Rodrigo]

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!

[GreenSock]

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). 

[filippos]

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?

[GSAP Helper]

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" 

 

[filippos]

For clarity. Pen here it works fine, but the same animation in combination with others causes problems. Is it a bad pin or something?

[GSAP Helper]

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(?)

[filippos]

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?

 

[GreenSock]

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? 

[filippos]

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.

[Rodrigo]

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!