(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirements –
1 – Elementor Pro
Image Reveal with Clip Path CSS and Gsap
- Make sure you add this gsap script once at the start of your code. It only needs to be added once even if you have multiple codes that run gsap. Also, make sure that your website is not using Gsap by default as it maybe added by your plugins or theme. Incase of Gsap is already added by a plugin/theme then no need to reference the Gsap script code below.
- You can also add Gsap script to run on your whole website instead of the specific page. This is only good if you have major pages using Gsap animation.
- We also add “transition:none !important;” to any element we are using Gsap with because by default Elementor adds “transition:all” to all elements and using transition in CSS will mess the Gsap code as we can control transition via Gsap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
1. Horizontal Reveal from Bottom
<style>
.dm-hero-image1 img{
scale:1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image1 {
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image1 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image1 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image1", {
duration: 1.5,
clipPath: "polygon(0 100%, 100% 100%, 100% 100%, 0 100%)",
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image1",
start: "top 60%",
scroller: "body"
}
});
</script>
2. Horizontal Reveal from Top
<style>
.dm-hero-image1-rev img{
scale:1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image1-rev {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image1-rev img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image1-rev img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image1-rev", {
duration: 1,
clipPath: "polygon(0 0, 100% 0, 100% 0%, 0 0%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image1-rev",
start: "top 60%",
scroller: "body"
}
});
</script>
3. Vertical Reveal from Left
<style>
.dm-hero-image2 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image2 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image2 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image2 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image2", {
duration: 1,
clipPath: "polygon(0 0, 0% 0, 0% 100%, 0% 100%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image2",
start: "top 60%",
scroller: "body"
}
});
</script>
4. Vertical Reveal from Right
<style>
.dm-hero-image2-rev img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image2-rev {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image2-rev img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image2-rev img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image2-rev", {
duration: 1,
clipPath: "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image2-rev",
start: "top 60%",
scroller: "body"
}
});
</script>
5. Hexagon Reveal
<style>
.dm-hero-image3 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image3 {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image3 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image3 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image3", {
duration: 1,
clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image3",
start: "top 60%",
scroller: "body"
}
});
</script>
6. Parallelogram Reveal
<style>
.dm-hero-image4 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image4 {
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image4 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image4 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image4", {
duration: 1,
clipPath: "polygon(25% 50%, 75% 50%, 75% 50%, 25% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image4",
start: "top 60%",
scroller: "body"
}
});
</script>
7. Parallelogram Reveal Reverse
<style>
.dm-hero-image5 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image5 {
clip-path: polygon(75% 0%, 0% 0%, 25% 100%, 100% 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image5 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image5 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image5", {
duration: 1,
clipPath: "polygon(75% 50%, 25% 50%, 25% 50%, 75% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image5",
start: "top 60%",
scroller: "body"
}
});
</script>
8. Star Reveal
<style>
.dm-hero-image6 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image6 {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image6 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image6 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image6", {
duration: 1,
clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image6",
start: "top 60%",
scroller: "body"
}
});
</script>
9. Octagon Reveal
<style>
.dm-hero-image7 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image7 {
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image7 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image7 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image7", {
duration: 1,
clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image7",
start: "top 60%",
scroller: "body"
}
});
</script>
10. Circle Reveal
<style>
.dm-hero-image8 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image8 {
clip-path: circle(50% at 50% 50%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image8 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image8 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image8", {
duration: 1,
clipPath: "circle(0% at 50% 50%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image8",
start: "top 60%",
scroller: "body"
}
});
</script>
11. Left Bottom Reveal
<style>
.dm-hero-image9 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image9 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image9 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image9 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image9", {
duration: 1,
clipPath: "polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image9",
start: "top 60%",
scroller: "body"
}
});
</script>
12. Right Bottom Reveal
<style>
.dm-hero-image10 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image10 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image10 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image10 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image10", {
duration: 1,
clipPath: "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image10",
start: "top 60%",
scroller: "body"
}
});
</script>
13. Left Top Reveal
<style>
.dm-hero-image11 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image11 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image11 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image11 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image11", {
duration: 1,
clipPath: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image11",
start: "top 60%",
scroller: "body"
}
});
</script>
14. Right Top Reveal
<style>
.dm-hero-image12 img {
scale: 1;
transform-origin: left;
transition: none !important;
}
.dm-hero-image12 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
</style>
<script>
gsap.from(".dm-hero-image12 img", {
duration: 1,
scale: 1.5,
ease: 'power2.out',
scrollTrigger: {
trigger: ".dm-hero-image12 img",
start: "top 60%",
scroller: "body"
}
});
gsap.from(".dm-hero-image12", {
duration: 1,
clipPath: "polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%)",
ease: 'power1.out',
scrollTrigger: {
trigger: ".dm-hero-image12",
start: "top 60%",
scroller: "body"
}
});
</script>
