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=sharingAnd 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>
