top of page

Custom Header Transition in Wix Studio

Updated: Jun 12




HTML Embed 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'})


// CREATE YOUR OWN EVENT HANDLER
export function section6_viewportEnter(event) {
    headerTl.play();
}

// CREATE YOUR OWN EVENT HANDLER
export function section5_viewportEnter(event) {
    headerTl.reverse();
}

// Copying/Pasting Event Handlers From Website to Website or Even From Page to Page Will Break the Code. Avoid This by Adding the Event Handlers Manually Like Shown in the Video.

Enjoy!

Comments


bottom of page