10 sec video with stepped ease

[zonf]

Hello,

 

I am about to start doing a landing page with a 10 second video. But the thing is, they wanna add 3d elements to the video so i have to do it with stepped ease or something and make it move by mouse scroll.

 

On the video, a guy jumps off the cliff with a snowy enviroment and when his fall ends he drops in to a cave and landing page itself fadein/scale up. 

 

So, I have few ideas but i wonder, how would you make this ? Simply: How to play video frames by mouse scroll with highest performance & quality ?

 

Just wanna see how would you do,

thanks.

[Jonathan]

Hello zonf, and Welcome to the GreenSock Forum!

 

That sounds like a you want to first get the animation right and then later add the event handlers for mouse scroll.

 

Is your question more about how to use GSAP or how to setup mouse scroll or event handlers?

 

Are you looking to do a scroll effect?

 

Can you please show us some GSAP code you have tried?

 

Here is a helpful example on how to create a codepen example:

 

 

Any additional info will be highly appreciated, thanks!

 

Happy Twening!

[zonf]

I haven't tried yet but i just wonder if did you came across with this situation such as playing video with greensock but not with html5 video player, with steppedease or something like that. So i can control it with the tween controllers (stop reverse etc...).

 

Which way should i use ?

[PointC]

Hi zonf 

 

Welcome to the GreenSock forums.

 

Diaco (one of our moderators) has a cool pen that demonstrates controlling video with Draggable. It can probably give you some ideas.

 

See the Pen JXXMaB by MAW (@MAW) on CodePen.

 

Hopefully that gets you started.

 

Happy tweening.

[zonf]

Thank you @pointc ! Gonna try to build on this one. Deadline is at the end of this month so gonna share it with you too guys. Sigh... Such an amazing platform. 

[Jonathan]

Keep in mind that Diaco's example is using Draggable on a HTML5 <video> tag, I noticed in your example that you stated that , but not with a html5 video player.

 

So it is still using the HTML5 video player but is basically using GSAP to animate the currentTime property of the HTML5 <video> element when dragged with Draggable.

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime