Liquify Pro
Log in

Welcome to the Liquify Community

Updated 16 hours ago

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>
J
c
4 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 🙂
Add a reply
Sign up and join the conversation on Discord
/* Initial styles for load animations /[animation=\"load\"] { opacity: 0; transform: translateY(40px);}/ Initial styles for scroll animations */[animation=\"scroll\"] { opacity: 0; transform: translateY(40px);}","answerCount":4,"upvoteCount":0,"datePublished":"2024-12-03T10:30:49.222Z","author":{"@type":"Person","url":"https://liquify.hall.community/members/9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","name":"consti","identifier":"9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","image":"https://cdn.discordapp.com/avatars/701432878445363300/44f62a3538cae701b18f47cf9155a4b7.webp?size=256"},"suggestedAnswer":[{"@type":"Answer","text":"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 :)","upvoteCount":0,"dateCreated":"2024-12-03T10:42:03.838Z","datePublished":"2024-12-03T10:42:03.838Z","dateModified":"2024-12-03T10:42:03.838Z","url":"https://liquify.hall.community/should-gsap-work-without-any-adjustments-MtNq12C4CkJ5#9536812c-a3dd-4df5-994b-5f0406befb2a","author":{"@type":"Person","url":"https://liquify.hall.community/members/b4493d12-c7f6-4370-8c1b-bca956985c92","name":"Jan","identifier":"b4493d12-c7f6-4370-8c1b-bca956985c92","image":"https://cdn.discordapp.com/avatars/547767203345334283/0120b0d0a42e96a26c61006e1380bc03.webp?size=256"}},{"@type":"Answer","text":"@Jan they are on div elements, not on elements, that have li tags.. the links is: gooddesk.deOn 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...","upvoteCount":0,"dateCreated":"2024-12-03T13:09:44.686Z","datePublished":"2024-12-03T13:09:44.686Z","dateModified":"2024-12-03T13:10:02.328Z","url":"https://liquify.hall.community/should-gsap-work-without-any-adjustments-MtNq12C4CkJ5#f5a5fdda-60df-42ef-8dd1-eacd6612d40e","author":{"@type":"Person","url":"https://liquify.hall.community/members/9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","name":"consti","identifier":"9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","image":"https://cdn.discordapp.com/avatars/701432878445363300/44f62a3538cae701b18f47cf9155a4b7.webp?size=256"}},{"@type":"Answer","text":"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","upvoteCount":0,"dateCreated":"2024-12-03T16:09:42.352Z","datePublished":"2024-12-03T16:09:42.352Z","dateModified":"2024-12-03T16:09:42.352Z","url":"https://liquify.hall.community/should-gsap-work-without-any-adjustments-MtNq12C4CkJ5#eb0a28ec-4c46-4699-8b7f-598734562a68","author":{"@type":"Person","url":"https://liquify.hall.community/members/b4493d12-c7f6-4370-8c1b-bca956985c92","name":"Jan","identifier":"b4493d12-c7f6-4370-8c1b-bca956985c92","image":"https://cdn.discordapp.com/avatars/547767203345334283/0120b0d0a42e96a26c61006e1380bc03.webp?size=256"}},{"@type":"Answer","text":"Yeah on some devices it‘s working without any problem, on other devices not. But thank you 🙂","upvoteCount":0,"dateCreated":"2024-12-03T16:10:26.510Z","datePublished":"2024-12-03T16:10:26.510Z","dateModified":"2024-12-03T16:10:26.510Z","url":"https://liquify.hall.community/should-gsap-work-without-any-adjustments-MtNq12C4CkJ5#9424c2a3-7fe2-464e-bc9f-eff0d353c210","author":{"@type":"Person","url":"https://liquify.hall.community/members/9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","name":"consti","identifier":"9ff01750-9cd7-44bc-abd4-0c46bf19eb3f","image":"https://cdn.discordapp.com/avatars/701432878445363300/44f62a3538cae701b18f47cf9155a4b7.webp?size=256"}}]}}