Custom Header Transition in Wix Studio
- Ryan Shafer
- May 10, 2024
- 1 min read
Updated: Jun 12, 2024
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.
Comments