(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
Don’t want to make from scratch? Get the template instead 🙂
Animated Photo Collage Gallery Reveal based on scroll – Elementor & GSAP code (v1)
- dm-scroll-reveal-image-wrapper is the CSS class of the container that has all the images. Ideally, it should be 100vh height.
- dm-scroll-reveal-image is the CSS class of the images that need to show when scrolling down.
- The images are given position absolute and rotate value. (In this case we do it via Elementor editor, but you can do it via code too)
- In below code, change 1000% in end:’1000% 50%’ to your desired value to change the amount of scroll needed.
- Make markers:true to see it better and then make it false after all changes are done.
- rotate:’50deg’ is used to add rotation to images, you can change this value to your desired angle.
<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-scroll-reveal-image, .dm-scroll-reveal-image-wrapper {
transition: none !important;
}
</style>
<script>
const dmScrollRevealImage = document.querySelectorAll('.dm-scroll-reveal-image');
const dmScrollRevealTimeline = gsap.timeline({
scrollTrigger: {
trigger: '.dm-scroll-reveal-image-wrapper',
start: '50% 50%',
end: '1000% 50%',
scrub: true,
pin: true,
markers: false
}
});
dmScrollRevealImage.forEach((image, index) => {
dmScrollRevealTimeline.from(image, {
y: '120vh',
rotate: '50deg',
ease: "power4.out",
duration: 1
}, `-=0.5`); // Starts half a second before the previous animation ends
});
</script>
Animated Photo Collage Gallery Reveal based on scroll – Elementor & GSAP code (v2)
- dm-scroll-reveal-image-wrapper is the CSS class of the container that has all the images. Ideally, it should be 100vh height.
- dm-scroll-reveal-image is the CSS class of the images that need to show when scrolling down.
- The images are given position absolute and rotate value. (In this case we do it via Elementor editor, but you can do it via code too)
- In below code, change end value “300%” in end: ‘300% 50%’ to your desired value to increase/decrease amount of scrolling needed.
- After all changes make markers:false to hide the markers on screen.
- We have used array to control each image individually. Example in below code – dmScrollRevealImage[0] is the first image, dmScrollRevealImage[1] is the second image and so on.
- This allows us to use different y value and rotate value for each individual image.
- To add images, simply copy code from line 74 to 79 below and increase the array number (6 in this case) in dmScrollRevealImage[6] ,
- Important: In this code, I have used y:1000, y:1200 and so on, it basically moves the image 1000px below original location. I would recommend using y:’120vh’, y:’130vh’, and so on for better responsiveness. vh is basically viewport height, you can think of it as % in height. Using this makes sure that the images are always starting from outside the screen. If you use px, then in some vertical screens, it will be visible before even scrolling. I have added comments showing where to add vh values, it’s your choice whether to use it or not. You can check above youtube video at 13:45 to understand it better.
<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-scroll-reveal-image, .dm-scroll-reveal-image-wrapper {
transition: none !important;
}
</style>
<script>
const dmScrollRevealImage = document.querySelectorAll('.dm-scroll-reveal-image');
const dmScrollRevealTimeline = gsap.timeline({
scrollTrigger: {
trigger: '.dm-scroll-reveal-image-wrapper',
start: '50% 50%',
end: '300% 50%',
scrub: true,
pin: true,
markers: true
}
});
// Add animations to the timeline with overlapping
dmScrollRevealTimeline.from(dmScrollRevealImage[0], {
y: 1000, // Use y: '120vh', for better responsiveness
rotate: '50deg',
ease: "power4.out",
duration: 1 // You can adjust the duration as needed
}, '0'); // Starts at the beginning of the timeline
dmScrollRevealTimeline.from(dmScrollRevealImage[1], {
y: 1200, // Use y: '140vh', for better responsiveness
rotate: '0deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Starts half a second before the previous animation ends
dmScrollRevealTimeline.from(dmScrollRevealImage[2], {
y: 1700,// Use y: '160vh', make sure to use vh instead of px for better responsiveness
rotate: '150deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Overlaps by half a second
dmScrollRevealTimeline.from(dmScrollRevealImage[3], {
y: 1900,
rotate: '100deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Overlaps by half a second
dmScrollRevealTimeline.from(dmScrollRevealImage[4], {
y: 2200,
rotate: '120deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Overlaps by half a second
dmScrollRevealTimeline.from(dmScrollRevealImage[5], {
y: 2500,
rotate: '50deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Overlaps by half a second
dmScrollRevealTimeline.from(dmScrollRevealImage[6], {
y: 2700,
rotate: '50deg',
ease: "power4.out",
duration: 1
}, '-=0.5'); // Overlaps by half a second
</script>
Add Smooth Scroll for better effect
The below code is used to add smooth scrolling with lenis js. You can use any other plugin too.
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>
<script>
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
direction: 'vertical', // vertical, horizontal
gestureDirection: 'vertical', // vertical, horizontal, both
smooth: true,
mouseMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
})
//get scroll value
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
