Should GSAP work without any adjustments?

cconsti

Hi,

Ich use GSAP for the fade in of the element on the website. The problem is, that when I scroll through some pages, some content doesn´t load with GSAP. But when I open the live webflow site without the conversation, it´s working. Does somebody know if I need to change something?
Or does somebody know an alternative the have the fade in effect when scrolling. I already had the native fade un animamtion from webflow, but it was very buggy, so maybe there is another solution?

Here a video to show: https://drive.google.com/file/d/1se2VYMPJMasZdOatwsVI7AR6Alh5Te_-/view?usp=sharing
And this is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

/* Initial styles for load animations /[animation="load"] { opacity: 0; transform: translateY(40px);}/ Initial styles for scroll animations */
[animation="scroll"] {
opacity: 0;
transform: translateY(40px);
}

<script>
gsap.registerPlugin(ScrollTrigger);

// On page load animations
document.addEventListener("DOMContentLoaded", () => {
gsap.to('[animation="load"]', {
opacity: 1,
translateY: 0,
duration: 1,
stagger: 0.25,
ease: 'power2.out',
});
});

// Scroll into view animations
gsap.utils.toArray('[animation="scroll"]').forEach((element) => {
gsap.fromTo(element,
{ opacity: 0, translateY: 40 },
{
scrollTrigger: {
trigger: element,
start: 'top 98%',
end: 'bottom 2%',
},
translateY: 0,
opacity: 1,
duration: 0.8,
ease: 'power2.out',
}
);
});
</script>

31 comments

JJan

On what elements are the [animation="scroll/load"] attributes? Can you inspect the Shopify page and look wether they are there? Or send the link if you want :)

cconsti

@Jan they are on div elements, not on elements, that have li tags.. the links is: gooddesk.de
On some devices it´s working, on other it´s not working. On my 35" Screen it´s working, on the MacBook Screen it´s not working always...

JJan

Hmm, they seem to be all working when I visit the site. There might be a problem with the triggers depending on the breakpoint, but I would nee to take a deeper look when I have time

cconsti

Yeah on some devices it‘s working without any problem, on other devices not. But thank you 🙂

jjonas.halbstark

@Jan do you have any update? @consti or did you solved the issue?

cconsti

Unfortunately not

jjonas.halbstark

Hi @consti, we are currntly launching some big projets. Jan hopfully has time in the next days. Thanks for your patience

cconsti

No problem, thankyou 🙏

JJan

Hey @consti, do you still need help with this? I was a bit busy the last weeks, sorry :)

cconsti

If you have time, then Yes please

JJan

Did you change anything to the animations? It works fine for me on any browser/device. Or do you know how I can reproduce the missing animations? :)

cconsti

It´s also working on my external display (34") and MacBook 16". The Cooperate page (https://www.gooddesk.de/pages/cooperate) doesn´t work on my ipad if I scroll faster and somebody told me on his 14" MacBook some parts are also not working.

JJan

Can you try to listen to the window.load Event?
So instead of document.addEventListener("DOMContentLoaded") try window.addEventListener("load").

If the reason for the inconsitencies are layout shifts, then this should already help

cconsti

I think I found the error, but I need to try on other devices too. I had a code, that changed the opacity attributes

cconsti

But I am not sure, I need to try

cconsti

@Jan I tested it, but it doesn´t work. I just found out, that i can´t see the section under 'Haben Sie noch Frage?' on my 16" MacBook...
Here the link: https://xuhenkysgdm7fedx-57626296517.shopifypreview.com/pages/cooperate

Attachment

Bildschirmfoto_2024-12-29_um_18.17.32.png

JJan

Can you set the markers to true and look, whether they are at the correct position? It still feels like a trigger problem

cconsti

@Jan I activated the markers - is this correct, because I never worked with them before? https://w5t6hizheaohot7x-57626296517.shopifypreview.com

JJan

Jup, with the markers you can clearly see that there is some sort of shift happening. When you scroll down on your laptop, you will see the markers being far below the actual section. I saw that you have the window load event, but only on the other animation. Can you try it like this:

gsap.registerPlugin(ScrollTrigger);

// On page load animations
window.addEventListener("load", () => {
gsap.to('[animation="load"]', {
opacity: 1,
translateY: 0,
duration: 1,
stagger: 0.25,
ease: 'power2.out',
});

// Scroll into view animations
gsap.utils.toArray('[animation="scroll"]').forEach((element) => {
gsap.fromTo(element,
{ opacity: 0, translateY: 40 },
{
scrollTrigger: {
trigger: element,
start: 'top 98%',
end: 'bottom 2%',
markers: true, // Add markers to visualize trigger points
},
translateY: 0,
opacity: 1,
duration: 0.8,
ease: 'power2.out',
}
);
});
});

JJan

And to prevent content layout shift, you can also try to set a fixed height or ratio to the images in the grid or other elements

cconsti

I chaged it and now the markers are not jumping anymore 🙏 . but for example this element takes longer to show than the others.

JJan

Might be because of SwiperJS initialising after GSAP? Can you try and give the elements some fixed min height just to test?

cconsti

The Review Section?

JJan

Jup, my guess is that the section has a different height before SwiperJS sets the slides per view and pushes the slides together

cconsti

On the wrapper or on the items?

JJan

Doesn't really matter, as long as the height is enough to get rid of a potential layout shift

JJan

But it should be inside the animation wrapper or the animation wrapper itself

Attachment

cconsti

I set .slider-main_inner-wrapper to 100vh

cconsti

but it´s the same

JJan

Hmm, at this point I'm kind of out of ideas :/

cconsti

But thank you 🙂

Add a reply

Welcome to the Liquify Community

Should GSAP work without any adjustments?