Image Reveal Animation With GSAP
An “Image Reveal Animation with GSAP” typically refers to a web development project where GSAP (GreenSock Animation Platform) is used to create an engaging and visually appealing animation effect that reveals an image in a dynamic and interactive way. GSAP is a popular JavaScript library for creating high-performance animations on the web.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<style>
.reveal {
overflow: hidden;
}
</style>
<script>
gsap.registerPlugin(ScrollTrigger);
let revealContainers = document.querySelectorAll(".reveal");
revealContainers.forEach((container) => {
let image = container.querySelector("img");
let tl = gsap.timeline({
scrollTrigger: {
trigger: container,
toggleActions: "restart none none reset",
start: "top 50%",
end: "bottom 20%"
}
});
tl.set(container, { autoAlpha: 1 });
tl.from(container, 1.5, {
opacity: 0,
ease: Power2.out
});
tl.from(image, 1.5, {
opacity: 0,
scale: 1.3,
delay: -1.5,
ease: Power2.out
});
});
</script>