Jump to content
Search Community

10 sec video with stepped ease

zonf test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...