Expand the video to the entire viewport according to scrolling

[dedeinc]

Hi, everyone on GSAP community!
I'm attempting to make an animation with ScrollTrigger.

 

◯What I'd like to do
1. Expand the video to the entire viewport according to scrolling.
2. change the position of the video to the center when it expands.
3. After the video is expanded, display the title as it scrolls. Keep the video displayed throughout the viewport until the title is displayed.

 

◯The issues
・Scrolling and video enlargement timing does not match.
・Video cannot be pinned to entire viewport while title is displayed.

 

 

Do you have any idea to fix the animation of them?

 

 

Please look at attached video file of the behavior image for reference.

(There is 1 megabyte limit on this board, Please look at my latest post)

See the Pen eYxaPEO by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen

[Sujan]

@dedeinc I've forked your pen and done some gsap. I don't know  if it meets your requirement or not. Hope it works

See the Pen abXrPZQ by devSanjay (@devSanjay) on CodePen

[dedeinc]

Hi, @Sujan!

Thanks for your idea!

 

May I ask a question?
Is it possible to always keep the position of the video in the element to the center?

It is positioned well above the center before scrolling on the demo.

 

Please see the reference video. I have put a red circle at the center position as a marker.

(There is 1 megabyte limit on this board, I deleted the video on the first post)

[Sujan]

@dedeinc sorry, I didn't get you. Can you elaborate more, what you want to achieve.

you mean to say scale up the video only after reaching the center???

 

 

[Toso]

no need to pass 2 scrollTriggers into the same timeline, I fixed that code and left some comments 

 

 

See the Pen ZEwNdGW by ahmed-attia (@ahmed-attia) on CodePen

 

and that another may be helpful

 

See the Pen ExrzBgX?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

 

and this topic is the one you looking for if you want to jump into something cooler  (clipPath, clip-path, SVG mask)

 

 

 

 

 

 

[dedeinc]

 

@Sujan,

I mean to say the video scale ups while scrolling, the issue is other point.

 

Please look at the image of current situation.

The center position of river video is under the viewport,

 

 

 

 

 

but I'd like to always keep the center of river video on the viewport until to reach the section 2 like this clip.

 

I probably think the size of river video needs to fit the bottom of viewport, but I'm not sure.

Is there any way to fix it?

 

 

 

[dedeinc]

Hi, @Toso!

 

Thanks to your minimal demo! but It seems to have some different point that I'd like to do. 

 

・The river video scale ups while scrolling at the same time
・The center of river video always keep on the viewport until to reach the section 2

 

SVG mask is also good ways, Thank you, I'll check this topic.

[mvaneijgen]

Hi @dedeinc

 

Something like this? Everything starts like you want it on page load, then you have one ScrollTrigger that starts as soon as you start scrolling which scales the video until it hits the top of the browser. Then a second ScrollTrigger takes over which pins the video and fades the text.

 

Of course we can't make the effect you envisioned in your head perfectly that also isn't the goal of this forum. We try to help you understand the tools better, so if this isn't perfect, just fork one of the pens someone else already suggested and try to tweak it to your liking, if you then get stuck post a new demo with the things you've tried, that way we can we can see your thought process and thus beter help you understand the tools! 

 

See the Pen eYxwvQP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Hope it helps and happy tweening! 

[dedeinc]

Hi,  @mvaneijgen!

Thank you for your idea! I've fixed the code that to keep the center of river video on the viewport until to reach the section 2. 

(In the default viewport of code pen, the image shrinks as the screen height decreases, I have set the overall width of the element narrower)

 

See the Pen wvNVqdK by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen

[mvaneijgen]

Alright. Just to be sure, do you still have a question? Or is your problem solved? Feel free to mark one of the post as "Mark as Solution", even you're own post will do. 

[dedeinc]

My issues are solved, because of @Sujan, @Toso, @mvaneijgen.
Thanks to you guys!