Custom Header Transition in Editor X
- Apr 17, 2023
- 1 min read
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'; const header = $w('#scrollHeader'); const headerTlatStart = timeline(); const headerTl = timeline(); headerTlatStart .add(header, {duration: 0, y: -100}) headerTl .add(header, {duration: 500, y: 0, easing: 'easeInSine'}) export function section6_viewportEnter(event) { headerTl.play(); } export function 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