Pin a video and disable scroll till it get's complete (ScrollTrigger)

[Atharv varshney]

Hi, I want to make something like this: https://flamapp.com/

This is too advanced, but what I want is just pin a video till it get's over (Video duaration complete) and automatically start playing when it is pinned. The video should be independant of scrolling (We have my GSAP Examples of controlling video through scroll, I don't want that).  I want the no matter how much user scroll, the video should be pinned and should play. I think that we need to disable the scoll till the video get's over. After pinning is gone, I want a simple animation as well. 

Can you please suggest me a way or examples through which I can implement this? It will be a great help.

Thanks

[Cassie]

Hi!

Here's some pseudocode

 

ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  onEnter: () => {
    video.play()
    document.body.classList.add("noScroll") 
  }
});


video.addEventListener('ended', (e) => {
  document.body.classList.remove("noScroll") 
})

 

How to play video:  https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Disable scrolling: https://stackoverflow.com/questions/28411499/disable-scrolling-on-body

Find out when video ends: https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes

Pinning info: https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin

 

Give it a go, if you get stuck, pop back with a demo.

[Atharv varshney]

Hey thanks a lot, It is working. I just want another favour from you.

 

This is my current progress:

See the Pen jOQOrKe by Atharvvarshney (@Atharvvarshney) on CodePen

 

Here, The body is not scrolling and video is pinned until it gets over. But the problem is sometimes the video is pinned and starting again after running for one time as it again enters the trigger element. And also if I scroll up and down then video obviously restarts again. 

What I want is a simmilar effect like this once the video get's over.

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

Thanks you so so much for your help, I highly appreciate your help

[Rodrigo]

Hi,

 

Maybe you're looking for once. From the ScrollTrigger docs:

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

 

Here is a fork of your codepen:

See the Pen RwqwGgJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Atharv varshney]

Thanks, I was looking to add Layered pinning in this. Can you advise me an idea? Should I create a wrapper scrolltrigger.create of all the seperate ones?

See the Pen jOQOrKe by Atharvvarshney (@Atharvvarshney) on CodePen

Thanks again!

[Rodrigo]

Hi,

 

You can either use this approach:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 

Or you can give your videos a position absolute in order to animate them up using the observer plugin

https://greensock.com/docs/v3/Plugins/Observer

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!