odd lotus
Hello my people. I have an Astro component, with the "client:visible". The issue is that the script starts as soon as I access the page, not when the component is visible to the client. Here is my code.
Component:
<FuturedSection2 client:visible />
`
<section
aria-labelledby="comfort-heading"
class="gs_reveal4 mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8"
<div class="relative overflow-hidden rounded-lg">
<div class="card">
<img
src="https://icb.mx/wp-content/uploads/2023/06/centrifugas-FUGE-V-A-Junio-2023-1200x511.jpg"
alt=""
class="h-full w-full object-cover object-center"
/>
</div>
</div>
</section>
<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function animateFrom(elem, direction = 1) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gs_reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(
elem,
{ x: x, y: y, autoAlpha: 0 },
{
duration: 2,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto",
},
);
}
function hide(elem) {
gsap.set(elem, { autoAlpha: 0 });
}
document.addEventListener("DOMContentLoaded", function () {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal4").forEach(function (elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
......
});
});
});
</script>`
sly marlin
tribal forge
