CODEWITHSUNDEEP
javascriptcsssvgcss-transitionscss-mask
alexmart
alexmart

Reputation: 31

How can improve mask image page transition?

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.

Upvotes: 3

Views: 794

Answers (0)

Related Questions