Expand Video on Click

[Patrick Artof]

Hi,

 

I'm quite new to GSAP, so sorry if my question seems basic! 

Right now, i'm trying to understand the process of expanding an iframe on click, like on this page : https://www.explose.lu/en

The "video expand" effect can also be seen on other websites like https://spatzek.studio/.

 

They use a scale animation on click, but it's always centered and the video scales down and stops playing on scroll. Can anybody help me on understanding the process of their animation? 

 

Right now on my website i'm using the following script : https://jsfiddle.net/y1wv6dca/

 

But i'd like to make it smoother using gsap and expanding the video without using fullscreen, that is a little bit obstrusive for me.

 

Thanks a lot!

[ZachSaucier]

Hey Patrick and welcome to the GreenSock forums.

 

You're asking about a several effects that all apply to the same element. Among them are: making an element (in this case an image) expand and center on click, replacing that element with a video, and pausing the video and putting it back in place on scroll. Each piece will require different code to recreate. 

 

Unfortunately we don't have the capacity to build it out for you. If you have specific questions, especially about GSAP, please let us know and we're happy to help