[play video with scrollTrigger smoothly]

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

[play video with scrollTrigger smoothly]

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?

See the Pen KKRKbbg by zhewar799 (@zhewar799) on CodePen

[stop scrolling while animation play]

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.

See the Pen LYdgyRw by zhewar799 (@zhewar799) on CodePen

[Play an animation timeline before a ScrollTrigger]

thank you @mvaneijgen for your help, it works!

[Play an animation timeline before a ScrollTrigger]

Thank you, I added the CodePen.

 

[Play an animation timeline before a ScrollTrigger]

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");

See the Pen bGvjbqj by zhewar799 (@zhewar799) on CodePen