No colition in series
<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;
h1
{
border: 1px solid #f0f;
border-bottom-width: 20px;
}
}
}
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: 'Border Top Grow',
element: headline,
offset: 0,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 4,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 8,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 12,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 16,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 20,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 24,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 28,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
],
})
.build();
No colition in series with transform
<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;
h1
{
border: 1px solid #f0f;
border-bottom-width: 20px;
}
}
}
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: 'Border Top Grow',
name: 'Scale up',
element: headline,
offset: 0,
duration: 4,
duration: 16,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
transform: {
from: 'scale(1)',
to: 'scale(20)',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
name: 'Scale down',
element: headline,
offset: 4,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 8,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 12,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 16,
duration: 4,
duration: 16,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
transform: {
from: 'scale(20)',
to: 'scale(1)',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 20,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
{
name: 'Border Top Grow',
element: headline,
offset: 24,
duration: 4,
changes: {
borderTopWidth: {
from: '1px',
to: '20px',
},
borderBottomWidth: {
from: '20px',
to: '1px',
},
},
},
{
name: 'Border Bottom Grow',
element: headline,
offset: 28,
duration: 4,
changes: {
borderTopWidth: {
from: '20px',
to: '1px',
},
borderBottomWidth: {
from: '1px',
to: '20px',
},
},
},
],
})
.build();
Overlapping transforms
<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;
h1
{
transform-origin: top center;
}
}
}
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',
name: 'Rotate',
element: headline,
offset: 0,
duration: 16,
offset: 1,
duration: 7,
changes: {
transform: {
from: 'scale(1)',
to: 'scale(20)',
from: 'rotate(0)',
to: 'rotate(45deg)',
},
},
},
{
name: 'Scale down',
name: 'Multi mix transform',
element: headline,
offset: 16,
duration: 16,
offset: 3,
duration: 10,
changes: {
transform: {
from: 'scale(20)',
to: 'scale(1)',
from: 'scale(1) translateY(0)',
to: 'translateY(50%) scale(20)',
},
},
},
],
})
.build();