zhewar

but how do some website like Apple or this one do it https://www.dji.com/avata?site=brandsite&from=homepage

Hi, I want to control video playback from scrolling, I have created this webpage but the scroll effect is not as smooth as I want. how can I make the video play smoothly?

Hi, I have this animation when the page load, when I scroll while the animation play it mix the design with other section, I want to stop the scrolling till the animation end, or stay in first section till the animation end the user can scroll down Note: I have replaced my real image with those blue circles.

thank you @mvaneijgen for your help, it works!

Thank you, I added the CodePen.

I want to run first timeline (tl) then when I scroll second timeline trigger (tl1) but when I run this code it gives me big gap on the top of my page, when I remove the Pin or change it to false it work perfectly fine, but when I set the pin to my section it create the gap. so basically I want to create something like this apple page. https://www.apple.com/airpods-3rd-generation/ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); var tl = gsap.timeline(); tl.from("#img1", {scale:8,opacity: 1, duration: 1.5, ease: 'power1.easeOut'}); tl.from("#img2", {scale:8, opacity: 1, duration: 1.5, ease: 'power1.easeOut'}, "-=1.5"); tl.from("#title-txt", {fontSize: 30,opacity: 0, duration: 2, ease: 'power1.easeOut'},"-=0.5"); var tl1 = gsap.timeline({ scrollTrigger: { trigger: '#img1', start: 'top top', end: '+=1000', scrub: 0.6, markers: true, anticipatePin: 1, pin: '.sec1' } }); tl1.to("#img1", {x: "-100%", y: "-30%", duration: 1}); tl1.to("#img2", {x: "100%", y: "30%", duration: 1}, "-=1");