I'm trying to achieve the same page transition effect of this website http://56k.studiovoila.com/
So after a few search, I found this tutorial https://tympanus.net/Tutorials/CSSMaskTransition/, I took the PNG they use on the demo 1 and add it to my project with proper code.
You can see an exemple of my code here. (the effect is blurry but you can guess the effect)
const btnClick = document.getElementById("btn-click");
const body = document.querySelector("body");
btnClick.addEventListener("click",(e)=>{
e.preventDefault();
body.classList.remove("reveal");
body.classList.add("disapear");
});
body.addEventListener("animationend",()=>{
body.classList.remove("disapear");
body.classList.add("reveal");
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: static;
height: 100vh;
width: 100vw;
-webkit-mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
-webkit-mask-size: 7100% 100%;
mask-size: 7100% 100%;
background: yellow;
}
body.disapear {
animation: mask-play-disapear 2s steps(70) forwards;
}
body.reveal {
animation: mask-play-reveal 1.4s steps(70) forwards;
}
@keyframes mask-play-disapear {
from {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
to {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
}
@keyframes mask-play-reveal {
0% {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
100% {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
}
#div1 {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}<body>
<div id="div1">
<a href="#" id="btn-click">click me</a>
</div>
</body>THE PROBLEMS :
1. It's seems to bug when the user see the transition with firefox but only from a Mac computer (Catalina 10.15.5). You can see this bug on the website that I created at https://abiesco.ch
2. Because it's a PNG, I cannot easily change the shapes during the animation, it's not very flexible. I don't have the source file (photoshop or after effect).
MY QUESTION :
Is it possible to use SVG morphing to get the same effect? I know we can use anime.js with tympanus tutorial and DesignCourse youtubeVideo. But I really want to keep the water - organic shapes that fill and leave the screen.
I already tried bodymovin plugin for after effect that's allow to export after effect animation to a json file that lottie.js can animate. But the turbulence displacement filter (for the water effect) is not supported by the plugin.
Ok I found a better way to animate page transition.
I can use WebGL.
I found the perfect example for my case here but for now my skills are not good enough to deal with this.
I've made some PIXI.JS tutorial with shaders and filters, it's amazing what you can do but damn it's hard.
I will definitely dive into webgl later on when my skills will be good enough.