Petru Tirla

Hello, people! Just started using GSAP, and I just followed some YouTube tutorial, about an Overlay Zoom Effect with Timeline. But I encountered a glitch, let's say. When running the animation it goes well until reaching the "scroller-end" marker. And after that it's like it is refreshing or something. You will see on the video. Any Idea on why this happens? This is the video: https://jam.dev/c/62492e20-5c8f-49a3-a4fe-86c90da055da This is the code: <script> function run_gsap(){ let gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); const screenSize = window.screen.width >= 1025; if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){ gsap.registerPlugin(ScrollTrigger); overlay_zoom(); clearInterval(gsap_loaded); } }, 500); function overlay_zoom(){ const tl = gsap.timeline({ scrollTrigger: { trigger: '.content-scroll', start: '70px top', end: '750px center', scrub:true, pin: true, duration:3 } }); tl.to('.overlay-zoom', {scale:100, duration:1}); tl.to('.scroll-headline', {y: -20, opacity:1}, '<20%'); tl.to('.scroll-des', {y: -20, opacity:1},'<50%'); tl.to('.scroll-button',{y: -20, opacity:1},'<50%' ); tl.to('.overlay-zoom', {display:'none'}, '<'); } } run_gsap(); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>