Webflow + Wizardry technique + Scrolltrigger = Offset issues

[sango10]

Hi everyone,

 

Iam 36 years old, i never asked for help before, but iam struggling too much on this so i guess it's time...

 

Iam using webflow, wizardry technique for an awsome fluid responsive (obviously the issue coming from it), and gsap scrolltrigger.

After setting my animations based on scroll with gsap, the second animation (and the next, etc...) starts too early, or too late !

Then i refresh the page, and each animation respond correctly with it trigger.

 

I can't make a codepen demo because of the wizardry setup, so iam just hoping someone figured out how to fix it. 

 

Iam praying the Web Gods to get an answer. Cheers !

 

[OSUblake]

Hi sango,

 

Sorry to hear about your problems, but there's not a lot we can really advise on without some sort of minimal demo to experiment with.

 

The only thing I can think of is that your page layout has not settled when your ScrollTriggers are created, like say an image hasn't fully loaded and changes the layout.

 

Without some sort of demo that clearly shows the issue, about the only thing I can recommend is to try refreshing your ScrollTriggers.

 

window.addEventListener("load", () => ScrollTrigger.refresh());

 

 

[GreenSock]

Just for the record, this code is not necessary: 

window.addEventListener("load", () => ScrollTrigger.refresh());

Because ScrollTrigger already does that by default. So the only reason it wouldn't be working is if you're trying to load thing in AFTER the window's "load" event already fired. So maybe Webflow loads in assets dynamically that shift things around? You'd just need to figure out how to fire a ScrollTrigger.refresh() call AFTER your page is completely done shifting things around in the layout, like Blake said. 

[sango10]

Wow i wasn't expecting answers that fast, thank you guys.

Sadly i don't know where to put this line of code, iam from design side !

 

Here is my slice of code : 

<script>

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false
});

  
  gsap.to(".norookies", { 
    opacity: "100%",
    scrollTrigger: {
      trigger: ".img_rookies",
      start: "top center",
      toggleActions: "play none none reverse"
    }
  });
  
  
  gsap.to(".nogreenwashing", { 
    opacity: "100%",
    scrollTrigger: {
      trigger: ".img_greenwashing",
      start: "top center",
      toggleActions: "play none none reverse"
    }
  });
  
  
  gsap.to(".nogimmicks", { 
    opacity: "100%",
    scrollTrigger: {
      trigger: ".img_gimmicks",
      start: "top center",
      toggleActions: "play none none reverse"
    }
  });

</script>

The first animation works fine,  the second starting around 50vh earlier than expected, the last one around 100vh earlier...

If i refresh, everything is working.

I am missing a concept here... 

 

Please feel free to watch live link (the issue concerned the section "ARPERTON") : https://arperton.webflow.io/

 

Big thanks for your time.

 

[sango10]

Oh i guess i should give you the few lines of code that are embed in the before tag of the website, maybe this part is creating conflict :

 

<noscript>
<style>@media only screen and (min-width: 992px) {body {font-size: 1rem;}}</style>
</noscript>

<script>
function setFontSize() {
 let maxWidth = 1920;
 let windowWidth = $(window).width();
 if (windowWidth >= maxWidth || windowWidth < 992) {
 	$('body').removeAttr("style");
 } else {
  let fontSize = (windowWidth / 100) / 16;
  $('body').css('font-size', fontSize + "rem");
 }
}
setFontSize();
window.addEventListener("resize", function() {
	setFontSize();
});
</script>

 

[OSUblake]

Just a quick note. Opacity only goes to 1.

 

opacity: 1

 

I viewed your link, and it looks the same to me on first visit and on refresh. Even if there was something off, I wouldn't be able to tell because there are no markers, so I don't know when you are expecting the animations to happen.

 

[GreenSock]

Yep, Blake is exactly right. 

 

This is definitely more of a Webflow question. I'm totally unfamiliar with it. They just need to tell you how to trigger JavaScript when the ENTIRE page is completely finished loading and shifting the DOM around. That's where you'd put your ScrollTrigger.refresh() call. Perhaps you should reach out to the Webflow community. If we don't have a minimal demo (like a CodePen or CodeSandbox), it's almost impossible to troubleshoot effectively. 

[OSUblake]

If you're using custom fonts, those could be affect the layout after loading. I would try calling ScrollTrigger.refresh() once those fonts have been loaded.

 

https://stackoverflow.com/a/32292880/2760155

 

[sango10]

Ok i put the markers, obviously before refresh they are just not at the correct place.

https://arperton.webflow.io/

[sango10]

9 minutes ago, GreenSock said:

Yep, Blake is exactly right. 

 

This is definitely more of a Webflow question. I'm totally unfamiliar with it. They just need to tell you how to trigger JavaScript when the ENTIRE page is completely finished loading and shifting the DOM around. That's where you'd put your ScrollTrigger.refresh() call. Perhaps you should reach out to the Webflow community. If we don't have a minimal demo (like a CodePen or CodeSandbox), it's almost impossible to troubleshoot effectively. 

Actually i contacted a week ago the creator of wizardry technique but i didn't get answer. This is non-native webflow technique so i have no faith in webflow answer. Iam lost !

The truth is i can replicate this kind of animations inside webflow, but this is not as good as gsap in term of fluidity. BTW thank you for your precious help.

[GreenSock]

Yep, it looks like our suspicions were correct - you've got:

loading="lazy"

on those images. So they're not loaded initially, collapsing the layout.

 

Solutions I see: 

1. Don't do that
2. Set an explicit height/width on those elements so that they don't shift layout when the images load. This is probably the best option in my opinion. 

[OSUblake]

I've looked at it numerous times, and the markers are in same place every time. 🤷‍♂️

 

Just wondering if there might an issue with your scripts. You are loading GSAP and ScrollTrigger twice. 😲

 

 

[sango10]

9 minutes ago, OSUblake said:

I've looked at it numerous times, and the markers are in same place every time. 🤷‍♂️

 

Just wondering if there might an issue with your scripts. You are loading GSAP and ScrollTrigger twice. 😲

 

 

Ah yes thank you, in all my test i forgot it.

[sango10]

10 minutes ago, GreenSock said:

Yep, it looks like our suspicions were correct - you've got:

loading="lazy"

on those images. So they're not loaded initially, collapsing the layout.

 

Solutions I see: 

1. Don't do that
2. Set an explicit height/width on those elements so that they don't shift layout when the images load. This is probably the best option in my opinion. 

OMG !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

Damn the lazy load is a default setting in webflow........ i removed it on every pictures of the page and it fixed the issue !!!!

 

You have no idea how much time i spend trying to figure it out, and now i can fix the same issue on other websites i made recently. Thanks so much to both of you GreenSock & OSUblake for your time, you made my day !

[GreenSock]

Yay! Glad you got it fixed. Thanks for letting us know.