manage videos with scroll

[anderwander]

My intention is that the video is managed with scrolling, and that when it ends the next article appears. And also being able to decide at what point in the progress of the video those messages/paragraphs appear, instead of them appearing in their order in the HTML.
I tried to pin the video to his article (I may have done it wrong). But I keep getting this point where the video takes up the entire page. I am trying to replicate this page: https://www.nytimes.com/interactive/2020/09/09/world/middleeast/beirut-explosion.html

See the Pen JjVweNm by Ander-Garcia (@Ander-Garcia) on CodePen

[mvaneijgen]

Your video is around 15 seconds long, so I've split it up in three sections of each 5 seconds. First of the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've enabled GSDevTools for the animation, so we can first fully focus on the animation and create what we want to happen on scroll. I've modified your HTML and CSS, I've created a .trigger element and have everything stack right on top of each other with CSS (please disable all the JS to see what it looks like) I've taken this logic from my stacking cards post I encourage you to read through it, see below

 

 

Then on the timeline I've put all the tweens, frist the video tweens to 5 seconds over a duration of 5 seconds, then the video tweens to 10 seconds over a duration of 5 seconds and at the same time the first card animates in from of screen, and them the same for the next card. This is probably not fully correct, but it shows you how you can create a timeline and have things happen at the same time. I've add some ScrollTrigger code but this is commented out, but you can enable it to see what this would do on scroll, but be sure to disable it again when you want to tweak the animation. 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out this awesome tutorial how to work with ScrollTrigger. Hope it helps and happy tweening! 

 

 

 

See the Pen bGJOQzq?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen