top of page

Custom Header Transition in Editor X

Learn how to add a really cool header transition in Editor X with Velo Animations!



Before you add code to your website, I highly suggest you check our video to learn how to set up your website properly for the code to work.



Now that you watched the video, here is the code that you will need:


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!

bottom of page