Jump to content
Search Community

fullscreen video downscale on scroll

emjay test
Moderator Tag

Recommended Posts

Hello GSAP friends,

 

I am currently trying to implement the following:

 

A video is displayed in fullscreen after opening the page, and then when I scroll or when the video is over, it should move to its actual position and size in the header. The whole thing of course only once, when I scroll up again it should stay at the end position. 

 

For the beginning I tried to move the video to its end position while scrolling. First only with gsap.from(), because I didn't achieve any significant result, I tried it now with the new FLIP plugin. With this I get it to work halfway when I click the second time.

 

Please have a look at my example. Click once in the viewport and the video is in fullscreen. Then click again and you see what I actually want to achieve. (That the headline overlays the video I want to solve later so that it fades in from the left as soon as the video has reached its final position).

 

And now I hope you can tell me how to do this in combination with ScrollTrigger. I haven't reached the solution with flip yet, so you have to click twice.

 

Thanks for your help

Emjay

See the Pen 1b2e9fb46be7be2432982aa08ff77749 by emjay (@emjay) on CodePen

Link to comment
Share on other sites

On 4/1/2021 at 6:13 AM, emjay said:

The whole thing of course only once, when I scroll up again it should stay at the end position. 

Sorry, what do you mean by this?

 

On 4/1/2021 at 6:13 AM, emjay said:

the headline overlays the video I want to solve later so that it fades in from the left as soon as the video has reached its final position

I haven't looked closely, but I'm guessing this is a z-index/layering issue.

 

Side note: you should probably create your function(s) outside of the matchMedia listener so they don't get recreated multiple times. You can call it inside the matchMedia as needed.

  • Like 1
Link to comment
Share on other sites

You want it to start out full-screen and then if the user clicks or scrolls, it shrinks to its normal position in the DOM? You don't even need ScrollTrigger for that: 

See the Pen 59b9896807db1462bf355fd5792c4d13?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that the reason you saw that "jump" in the Flip animation was because you've got a big padding-top value on the element which gets factored into the "height", so all you need to do is tell Flip to animate that value too by using the "props" feature. 

 

Does that clear things up? 

  • Like 1
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...