Learn how to add a really cool header transition in Editor X with Velo Animations!
Embed Element Code:
<head>
<style>
body{
background-color: rgba(0,0,0,0);
backdrop-filter: blur(10px);
transform: scale(1.5);
border-radius: 0px;
-webkit-backdrop-filter: saturate(80%) blur(10px);
backdrop-filter: saturate(80%) blur(10px);
}
</style>
</head>Page Code:
import{timeline}from 'wix-animations';
constheader=$w('#scrollHeader');
constheaderTlatStart=timeline();
constheaderTl=timeline();
headerTlatStart.
.add(header,{duration:0,y:-100})
headerTl
.add(header,{duration:500,y:0,easing: 'easeInSine'})
exportfunction section6_viewportEnter(event) {
headerTl.play();
}
exportfunction section5_viewportEnter(event) {
headerTl.reverse();
}
Remember, the event handlers (red code) from the code above will not work on your website. You will need to add your own event handlers for EACH page. However, the code inside the event handler functions can be copied if you want.
Have Fun!
Comments