Start / stop markers are offset on mobile and different viewports

[eugenesochODR]

Hi,

 

Hi,

I’m currently building another Webflow project for my client, but I keep encountering similar issues. These problems are making me reluctant to use GSAP for projects, as I wish I knew what I’m doing wrong. It’s time-consuming, and I keep facing the same challenges.

Here’s a simple animation I’m trying to achieve: I have cards with an icon nested in a wrapper. The top of the wrapper acts as a trigger, which initiates the animation when it reaches the scroller start. On desktop, it sort of works, but it’s hit and miss—I’m not sure why the start and end points are sometimes offset.

When the page initially loads, the start and end points seem to be misplaced. However, when I refresh the page, everything works as expected.

It’s inconsistent.

I’ve tried removing all Webflow animations, but the problem persists.

I’m not sure what’s causing this, but investigating the issue is costing time and resources. I wish I knew what’s wrong so that we could confidently proceed and purchase the full version. Until these issues are resolved, it’s becoming a bit of a love/hate relationship.

 

Here is the project on Code Pen: 

 

Project on Webflow: https://clearmotionconcept.webflow.io/

 

Code for GSAP:

 

gsap.registerPlugin(ScrollTrigger);

const iconHolders = gsap.utils.toArray(".already-setup-to-go_content-wrapper");

iconHolders.forEach((header) => {

const icons = header.querySelectorAll(".card-with-icon"); // Select only the icons within this wrapper

gsap.from(icons, {

scrollTrigger: {

trigger: header,

start: "top 75%",

end: "bottom 25%",

toggleActions: "play none none reverse",

markers: true,

},

y: 160,

opacity: 0,

duration: 0.6,

stagger: 0.1,

});

});

 

See the Pen LEPJBNQ by Eugene-Soch (@Eugene-Soch) on CodePen.

[mvaneijgen]

This is by no means a minimal demo. There is loads of CSS being loaded externally and it is just a copy and paste from your HTML. If you want to get the most out of these forums, please create a minimal demo with just some coloured divs to illustrate the issue you're having.

 

If I remove your external CSS loaded in the HTML everything just works as expected, my advise to debug this Start by removing big chunks of your code base until the issue is gone, then start slowly in smaller chunks adding it back in until the issue is back again. This way you can pin point what is causing your issue and thus easier debug it. 

 

26 minutes ago, eugenesochODR said:

I wish I knew what’s wrong so that we could confidently proceed and purchase the full version. Until these issues are resolved, it’s becoming a bit of a love/hate relationship.

 

I also think that your issue is that you're not using the GSAP tools, you're using X for some smooth scroll effect and then probably something else to add some parallax animating to your images, these are probably all conflicting with GSAP. You'll find out that when you use the GSAP tools everything will just start playing nice with each other and you don't have to debug so much. 

 

Good luck with debugging.

 

See the Pen OPLowOK?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen.

[eugenesochODR]

2 hours ago, mvaneijgen said:

This is by no means a minimal demo. There is loads of CSS being loaded externally and it is just a copy and paste from your HTML. If you want to get the most out of these forums, please create a minimal demo with just some coloured divs to illustrate the issue you're having.

 

If I remove your external CSS loaded in the HTML everything just works as expected, my advise to debug this Start by removing big chunks of your code base until the issue is gone, then start slowly in smaller chunks adding it back in until the issue is back again. This way you can pin point what is causing your issue and thus easier debug it. 

 

 

I also think that your issue is that you're not using the GSAP tools, you're using X for some smooth scroll effect and then probably something else to add some parallax animating to your images, these are probably all conflicting with GSAP. You'll find out that when you use the GSAP tools everything will just start playing nice with each other and you don't have to debug so much. 

 

Good luck with debugging.

 

 

 

 

 

Thank you for this, I totally agree using GSAP alone should be the way forward, without emplying any webflow animations. 
What I have learned today though, that the culprit in this instance wasn't the conflicting code, but rather the way images were being loaded. 
I have removed the hero section, and it seemed to have fixed the issue, but then the issue returned.

I have then removed all the animations, leaving only GSAP, but the issue persisted! How annoying!
And then I checked, that the images are being lazy loaded by default!
I changed the setting to EAGER and et voila!
So then the question for you as an expert - could this be the source of the problem in this case, as it seems that this fixed the problem for me.

 

 

[mvaneijgen]

Yep, that could definitely also be the issue. If images set to lazy and you've not set proper dimensions  on the images they will start out with a height of 0 and then when they load they will  push every thing on the page down by the height they then get. It is best practice to always set the height and width of an image when they set to lazy load (and to my knowledge always), so that the space they take up is constant and they not cause a layout shift when the images do have  loaded. 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

You can create a simple script to track the loading status of all the images above the ScrollTrigger instances and when those images are fully loaded you can call the refresh method in order to tell ScrollTrigger to update the start/end points accordingly:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

You can also use this simple tool by David DeSandro:

https://imagesloaded.desandro.com/

 

Hopefully this helps

Happy Tweening!