90%
top of page

Add a Title

Add a Title
Published Date
Published Date
Tags
0 Comments
Views
Share Post

Comment

successMessage

errorMessage

Add a Title

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

No comments yet. Be the first to comment!"

Related Posts

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

Start Now
Start Now

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Add a Title

  • Writer: @lan Design
    @lan Design
  • Nov 11, 2023
  • 1 min read

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!



Comments

bottom of page