Creates a sticky container with 150vh height to provide a scrolling space of 50vh, establishing the foundation for scroll-based animations.
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
scrolling
.build();
Implements a scroll trigger mechanism that detects when the user scrolls to specific points, without yet applying any visual steps.
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
scrolling
.addTrigger({
name: 'Intro',
trigger: container,
})
.build();
Adds the first animation step: scaling up the headline gradually as the user scrolls.
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');
scrolling
.addTrigger({
name: 'Intro',
trigger: container,
steps: [
{
name: 'Scale up',
element: headline,
offset: 0,
duration: 10,
changes: {
transform: {
from: 'scale(1)',
to: 'scale(20)',
},
},
},
],
})
.build();
Incorporates a second animation step: progressively adding a blur effect to background elements.
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');
scrolling
.addTrigger({
name: 'Intro',
trigger: container,
steps: [
{
name: 'Scale up',
element: headline,
offset: 0,
duration: 10,
changes: {
transform: {
from: 'scale(1)',
to: 'scale(20)',
},
},
},
{
name: 'Blur',
element: headline,
offset: 3,
duration: 10,
changes: {
filter: {
from: 'blur(0px)',
to: 'blur(10px)',
},
},
},
],
})
.build();
Finalizes the intro animation sequence by controlling opacity levels, creating a smooth fade-out effect as the user continues scrolling.
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');
scrolling
.addTrigger({
name: 'Intro',
trigger: container,
steps: [
{
name: 'Scale up',
element: headline,
offset: 0,
duration: 10,
changes: {
transform: {
from: 'scale(1)',
to: 'scale(20)',
},
},
},
{
name: 'Blur',
element: headline,
offset: 3,
duration: 10,
changes: {
filter: {
from: 'blur(0px)',
to: 'blur(10px)',
},
},
},
{
name: 'Fade out',
element: headline,
offset: 8,
duration: 8,
changes: {
opacity: {
from: 1,
to: 0,
},
},
},
],
})
.build();
<section
class="intro container"
id="intro-container"
>
<div class="content">
<h1>Intro</h1>
</div>
</section>
<section
class="example container"
id="example1-container"
>
<div class="content">
<h2 id="example1-title">Example 1</h2>
</div>
</section>
<section
class="example container"
id="example2-container"
>
<div class="content">
<h2 id="example2-title">Example 2</h2>
</div>
</section>
<section
class="example container"
id="example3-container"
>
<div class="content">
<h2 id="example3-title">Example 3</h2>
</div>
</section>
section
{
width: 100vw;
height: 150vh;
&:first-of-type,
&:last-of-type
{
height: 120vh;
}
&.example
{
margin-top: -100vh;
}
.content
{
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
h2
{
opacity: 0;
transition: color .2s linear,
background-color .2s linear;
&.active
{
color: #fff;
background-color: #f0f;
}
}
}
import VanillaScroll from '@spomsoree/vanilla-scroll';
const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const container1 = document.getElementById('example1-container');
const container2 = document.getElementById('example2-container');
const container3 = document.getElementById('example3-container');
const headline = document.querySelector('h1');
const example1 = document.getElementById('example1-title');
const example2 = document.getElementById('example2-title');
const example3 = document.getElementById('example3-title');
scrolling
.addTrigger({
name: 'Intro',
trigger: container,
steps: [
{
name: 'Scale up',
element: headline,
offset: 0,
duration: 10,
changes: {
transform: {
from: 'scale(1)',
to: 'scale(20)',
},
},
},
{
name: 'Blur',
element: headline,
offset: 3,
duration: 10,
changes: {
filter: {
from: 'blur(0px)',
to: 'blur(10px)',
},
},
},
{
name: 'Fade out',
element: headline,
offset: 8,
duration: 8,
changes: {
opacity: {
from: 1,
to: 0,
},
},
},
],
})
.addTrigger({
name: 'Example 1',
trigger: container1,
steps: [
{
name: 'Fade In',
element: example1,
offset: 0,
duration: 20,
changes: {
opacity: {
from: 0,
to: 1,
},
},
},
{
name: 'Active',
element: example1,
offset: 20,
duration: 20,
onEnter: (event) => {
event.detail.element.classList.add('active');
},
onExit: (event) => {
event.detail.element.classList.remove('active');
},
},
{
name: 'Fade out',
element: example1,
offset: 40,
duration: 20,
changes: {
opacity: {
from: 1,
to: 0,
},
},
},
],
})
.addTrigger({
name: 'Example 2',
trigger: container2,
steps: [
{
name: 'Appear',
element: example2,
offset: -10,
duration: 20,
changes: {
opacity: {
from: 0,
to: 1,
},
},
},
{
name: 'Disappear',
element: example2,
offset: 30,
duration: 10,
changes: {
opacity: {
from: 1,
to: 0,
},
},
},
],
})
.addTrigger({
name: 'Example 3',
trigger: container3,
steps: [
{
name: 'Rotate',
element: example3,
offset: -10,
duration: 10,
changes: {
transform: {
from: 'rotate(0deg)',
to: 'rotate(-360deg)',
},
},
},
{
name: 'Appear',
element: example3,
offset: -10,
duration: 20,
changes: {
opacity: {
from: 0,
to: .5,
},
},
},
{
name: 'Appear 2',
element: example3,
offset: 10,
duration: 7,
changes: {
opacity: {
from: .5,
to: 1,
},
},
},
],
})
.build();