(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.)
Get Elementor Pro Today –
1 – Elementor Pro
3D Zoom Scroll Effect – Elementor and GSAP Tutorial
In this tutorial, we will make an amazing scroll effect that creates 3D zoom effect as you scroll. You can use any element to zoom, example: video, image, icons or containers/div.
3D Zoom Scroll Animation Code
- dm-zoom-reveal-wrapper-2 is the CSS class of the main container that will contains all your images/content. This container gets sticky until the animation i.e zooming images gets completed.
- dm-zoom-reveal-img-2 is the CSS class of all the images (or any other widget that you wish to zoom).
- dm-zoom-reveal-bg-2 is the CSS class of container that will be used for background color/image. This is only required if adding background color/image to dm-zoom-reveal-wrapper-2 is making the images pop out instantly. We are simply making this container place very back in the 3D space and scaling it up a lot to make it look like it is a full screen container. (If you check the above video, you can see me getting confused before adding this container, as previously adding color to wrapper container was making images pop out instantly. So I found this workaround of using extra container and scaling it up. But this is case by case I believe)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-zoom-reveal-wrapper-2,
.dm-zoom-reveal-wrapper-2 .e-con-inner{
transition: none !important;
transform-style: preserve-3d;
perspective:100dvh;
}
.dm-zoom-reveal-img-2 {
transform:translate3D(0dvh, 0dvh, -300dvh);
opacity:0;
filter:blur(20px);
z-index: 1;
}
.dm-zoom-reveal-bg-2 {
transform:translate3D(0dvh, 0dvh, -305dvh);
scale:4.5;
}
</style>
<script>
let dmZoomDistance;
/*Desktop translate*/
if (window.innerWidth > 1024) {
dmZoomDistance = 'translate3D(0px, 0px, 100dvh)';
/*Tablet translate*/
} else if (window.innerWidth > 767) {
dmZoomDistance = 'translate3D(0px, 0px, 150dvh)';
/*Mobile translate*/
} else {
dmZoomDistance = 'translate3D(0px, 0px, 150dvh)';
}
gsap.to('.dm-zoom-reveal-img-2', {
scrollTrigger: {
trigger: '.dm-zoom-reveal-wrapper-2',
start: '0% 0%',
end: '+=200%',
scrub: true
},
opacity:1,
filter:'blur(0px)',
stagger:0.5
});
gsap.to('.dm-zoom-reveal-img-2', {
scrollTrigger: {
trigger: '.dm-zoom-reveal-wrapper-2',
start: '0% 0%',
end: '+=300%',
scrub: true,
pin:true
},
transform: dmZoomDistance,
duration: 2,
zIndex:3,
stagger:0.5
});
</script>
