GSAP IMAGE REVEAL ON SCROLL TRIGGER - Elementor WordPress Tutorial Flex Container
Discover how to create stunning image reveal effects using GSAP and ScrollTrigger within Elementor for WordPress. Learn to leverage Flex Container properties to enhance the design and interactivity of your website effortlessly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <=
(window.innerWidth || document.documentElement.clientWidth)
);
}
gsap.utils.toArray(".img-container.right img").forEach((img) => {
gsap.to(img, {
clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
scrollTrigger: {
trigger: img,
start: "top 50%",
end: "bottom 100%",
scrub: true,
once: true, // Trigger only once
// markers: true,
},
});
});
gsap.utils.toArray(".img-container.left img").forEach((img) => {
gsap.to(img, {
clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
scrollTrigger: {
trigger: img,
start: "top 50%",
end: "bottom 100%",
scrub: true,
once: true, // Trigger only once
// markers: true,
},
});
});
gsap.utils.toArray(".img-container p").forEach((text) => {
gsap.from(text, {
opacity: 0,
y: 20,
scrollTrigger: {
trigger: text,
start: "bottom 90%",
once: true, // Trigger only once
// markers: true,
},
});
});
});
</script>