Jump to content
GreenSock

zonf

10 sec video with stepped ease

Recommended Posts

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.

Link to comment
Share on other sites

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! :)

  • Like 2
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

 

:)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×