GSAP on scroll animation of the banner section

[vanja6]

Hello guys, I'm fairly new to gsap and I'm trying out something. I was looking at beautiful kategora.com website and was wondering how should I approach the on scroll animation of the video that changes to full screen on scroll. Thank you in advance to reading my question!

[akapowl]

 

Hey there, welcome to the forums @vanja6

 

For something like that you definitely want to take a look at GSAP's ScrollTrigger

 

Here's an example with a background-image to get you started

 

See the Pen 511c68697826b91faa42b34963154277 by akapowl (@akapowl) on CodePen

 

The element itself is set to 100vw width and 100vh height here and scaled down to a scale of 0.9 initially, so on scroll (via scrub) it can easily be scaled to 1 to fully fill the screen - beginning when the trigger (which is set to be the container around the element to prevent unexpected outcomes due to the scaling of the element itself) hits the center of the viewport with its top edge ( thus start 'top center' - when the top of the trigger-element hits the center of the screen) and ending when its top hits the top of the screen (thus end: 'top top').

 

Hope this helps get you started. Happy scrolling.

 

[vanja6]

3 hours ago, akapowl said:

 

Hey there, welcome to the forums @vanja6

 

For something like that you definitely want to take a look at GSAP's ScrollTrigger

 

Here's an example with a background-image to get you started

 

 

 

 

The element itself is set to 100vw width and 100vh height here and scaled down to a scale of 0.9 initially, so on scroll (via scrub) it can easily be scaled to 1 to fully fill the screen - beginning when the trigger (which is set to be the container around the element to prevent unexpected outcomes due to the scaling of the element itself) hits the center of the viewport with its top edge ( thus start 'top center' - when the top of the trigger-element hits the center of the screen) and ending when its top hits the top of the screen (thus end: 'top top').

 

Hope this helps get you started. Happy scrolling.

 

You 

 

3 hours ago, akapowl said:

 

Hey there, welcome to the forums @vanja6

 

For something like that you definitely want to take a look at GSAP's ScrollTrigger

 

Here's an example with a background-image to get you started

 

 

 

 

The element itself is set to 100vw width and 100vh height here and scaled down to a scale of 0.9 initially, so on scroll (via scrub) it can easily be scaled to 1 to fully fill the screen - beginning when the trigger (which is set to be the container around the element to prevent unexpected outcomes due to the scaling of the element itself) hits the center of the viewport with its top edge ( thus start 'top center' - when the top of the trigger-element hits the center of the screen) and ending when its top hits the top of the screen (thus end: 'top top').

 

Hope this helps get you started. Happy scrolling.

 

You Sir just made my day, this is exactly what I was looking for, thank you!