top of page
Lanre Olayiwola

Lanre Olayiwola

Custom Header Transition in Editor X

Updated: Dec 29, 2023

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


Header Transition Editor X


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!



Comentarios


bottom of page