ScrollTrigger Issue - triggering too early

[Tanner]

Webpage being referenced - https://extend-v2.webflow.io/platform

 

For the life of me I cannot figure out why the "X" starts scaling up too early when scrolling to the CTA section. Sometimes it works correctly, other times the X begins to scale before the section comes into view. It is supposed to start scaling once the section becomes sticky. 

 

Any help would be very appreciated!!

See the Pen yLGOqBX by tannerdigital (@tannerdigital) on CodePen

[mvaneijgen]

Hi @Tanner welcome to the forum and thanks for being a Club Greensock member 🎉 

 

Can you maybe update your pen with the CSS and HTML, so we have a complete minimal demo. That way we can dive directly in to the code and help you, sorry we can't really debug live websites, there is just no way to modify the code.

[Tanner]

@mvaneijgen This page is actually built in the Webflow platform so the page was not hand-coded. Although you can view the structure & styling at this link - https://preview.webflow.com/preview/extend-v2?utm_medium=preview_link&utm_source=designer&utm_content=extend-v2&preview=040dd47ea0212b1e970e195847a14eb3&pageId=64c91488bff353f4da92caa2&workflow=preview

[Rodrigo]

Hi,

 

As Mitchel already mentioned there is not a lot we can do on live sites.

 

I'm not very familiar with Webflow so I don't really know where to look for the code. On top of that the scroll behaviour in the preview is quite jumpy, I assume that this is related to either the way webflow's preview works or maybe you have normalizeScroll set to true. Also there are no ScrollTrigger markers there, so we have zero clues of what is triggering and when 🤷‍♂️

 

Looking at the entire codebase is not something we have the time resources to do. Where do we look? What are we looking for? etc. That's why we ask for a minimal demo (emphasis on minimal) that isolates the problem you're having.

 

The only thing I can think of at a quick glance is that maybe you have images that either are not loaded or are lazy-loaded and the height of the document gets bigger after they load, which throws all of ScrollTrigger's calculations off. 

 

Finally I don't really see the use of adding this in your code:

ScrollTrigger.defaults({
  trigger: ".section_scaling-x",
  start: "top top",
  end: "bottom bottom"
});

If every ScrollTrigger instance that you create after that has it's own trigger,  start and end properties set, it really doesn't make a lot of sense.

 

Hopefully this helps.

Happy Tweening!