So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!
You can download the complete template here
The Following code goes into the HTML widget:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.utils.toArray(".parallax-section .parallax-image img").forEach((section, i) => {
// Get the height of the section container
const container = section.closest('.parallax-section');
const heightDiff = section.offsetHeight - container.offsetHeight;
if (heightDiff > 0) {
gsap.fromTo(section, {
y: -heightDiff
}, {
scrollTrigger: {
trigger: container, // Use the section top as the trigger
scrub: true,
markers: false,
start: "top bottop%",
end: "bottom 25%"
},
y: 0,
ease: "none"
});
}
});
</script>