I’ve got a website sectio pinned while image scroll up as the user scrolls. After the animaiton is complete the section seems to reload in to position. Can someone point to me what my mistake is. – here’s a link to the dev site http://ant.mhwddev.co.uk/
Here’s the HTML
<section id="landing-hero" class="full-height">
<div class="container">
<h1>A<span class="text-behind">n</span>t<br />S<span class="text-behind">t</span>e<span class="text-behind">e</span>l</h1>
<img id="landing-hero-image-one" src="<?php echo esc_url( $image_1['url'] ); ?>" alt="<?php echo esc_attr( $image_1['alt'] ); ?>" />
<img id="landing-hero-image-two" src="<?php echo esc_url( $image_2['url'] ); ?>" alt="<?php echo esc_attr( $image_2['alt'] ); ?>" />
<img id="landing-hero-image-three" src="<?php echo esc_url( $image_3['url'] ); ?>" alt="<?php echo esc_attr( $image_3['alt'] ); ?>" />
</div>
</section>
Here’s the GSAP
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: '#landing-hero',
start: 'top top',
end: '+=500', // Adjust this value as needed to ensure images move up before scrolling down
scrub: 0.1, // Smaller scrub value for smoother animation
},
});
// Set initial positions of the images off-screen
gsap.set(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], { y: '200%' });
// Animate all images simultaneously with smaller increments
tl.to(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], {
duration: 150, // Increase duration for slower animation
y: '-90%', // Smaller increment for smoother animation
});
// Pin the #landing-hero section and set endTrigger to #landing-hero-image-three
ScrollTrigger.create({
trigger: '#landing-hero',
start: 'top top',
pin: true,
endTrigger: '#landing-hero-image-three',
end: 'top+=90', // Adjust this value as needed to match the height of the images
scrub: 0.1, // Smaller scrub value for smoother pinning
});
// Scroll down the page after the images have reached the top
ScrollTrigger.create({
trigger: '#landing-hero-image-three',
start: 'top top',
end: 'top+=90', // Adjust this value as needed to match the offset of your content
scrub: 0.1, // Smaller scrub value for smoother scrolling
onEnter: () => {
window.scrollTo(0, window.scrollY + 1);
},
});
I’m expecing the page to scroll as normal once the animations are over, Instead the section seems to reload.