Page Transition - video?

[rykerx]

Hey Guys,

I was really hoping someone could help, I've been searching for hours, I'm trying to do what looks to be like a video page transition and was hoping if it can be done with GSAP or what you'd recommend

 

The transition can be seen on this website: https://www.netflixshadowandbone.com/

 

If you 'Enter' and click into either 1 of the 4 selections - top right eagle, you will see a 'smoke' like page transition that looks amazing

 

I see the video in the source linked: https://www.netflixshadowandbone.com/uploads/version/1620299202277/static/webgl/transition/mask_smoke_1080p.mp4

But I cannot seem to find out how they are doing this transition

I really appreciate you guys for helping so much, this is nothing I've seen on any website

[Rodrigo]

Hi @rykerx and welcome to the GreenSock forums.

 

Actually they are using the video you mention but the entire thing is made on a canvas, most likely using WebGL and shaders:

 

Also  I checked some of the source and can't find which particular framework this was done with (Vue, React, Svelte, Angular, etc.).  React and Vue devtools indicate that they're not being used.

 

It is without a question a challenging and fun effect to make, unfortunately we don't have the time resources to build something as complex as that since it would require a great deal of work and time.

 

A good starting point would be to use the video and the HTML media API in order to change the display/visibility property of the video container and then play the video when a route changes, using an overlay transition approach.

 

Let us know if you have any other questions.

 

Happy Tweening!