Hello!

I'm StickyMate

And I made these elements special

With just two attributes

Directly in the markup

Bang! Bang! Bang!

Use your imagination

To implement great ideas that will present your content

In the most spectacular way

Animate easily!

data-sticky="from: 0, duration: 100vh"
·
data-animation="
opacity: {
0:
1,
50vh:
.1,
100vh: .05
},
transform: {
0:
scale(1),
100vh: scale(7.5)
}
"
data-animation="opacity: {-45vh: 0, 0: 1}"
data-sticky="from: 0, duration: 150vh"
·
data-animation="
transform: {
50vh:
scale(1) translate(0, 0),
75vh:
scale(.75) translate(0, 0),
125vh: scale(.75) translate(-125%, 0)
}
"
·   ·
data-animation="opacity: {0: 1, 25vh: 0}"
·   ·
data-animation="opacity: {25vh: 0, 50vh: 1}"
·
data-animation="
transform: {
68vh:
scale(.75) translate(125%, 0),
118vh: scale(.75) translate(0, 0),
150vh: scale(1) translate(0, 0)
}
"
data-animation="
opacity: {-100vh: 0, -90vh: 1, -75vh: 1, -65vh: .15, -50vh: 1},
transform: {
-100vh: translate(-500%, 0) scale(1),
-75vh: translate(0, 0) scale(1),
-65vh: translate(0, 0) scale(3),
-50vh: translate(0, 0) scale(1),
-45vh: translate(0, 0) scale(1),
-35vh: translate(-100%, 0) scale(1),
-20vh: translate(0, 0) scale(1)
}
"
data-animation="
transform: {
-75vh: translate(0, 0),
-65vh: translate(100%, 0),
-50vh: translate(0, 0),
-45vh: translate(0, 0),
-35vh: translate(-100%, 0),
-20vh: translate(0, 0)
}
"
data-animation="
opacity: {-70vh: 0, -60vh: 1, -45vh: 1, -35vh: .15, -20vh: 1},
transform: {
-70vh: translate(500%, 0) scale(1),
-45vh: translate(0, 0) scale(1),
-35vh: translate(0, 0) scale(3),
-20vh: translate(0, 0) scale(1)
}
"
data-sticky="from: 0, duration: 200vh"
·
data-animation="
opacity: {120vh: 1, 150vh: 0},
transform: {
50vh:
translate3d(0, 0, 0) rotateX(0),
75vh:
translate3d(0, 0, -50vh) rotateX(0),
100vh: translate3d(0, 0, -100vh) rotateX(70deg),
150vh: translate3d(0, 30vh, -100vh) rotateX(70deg)
}
    "
·   ·
data-animation="opacity: {0: 1, 25vh: 0}"
·   ·
data-animation="opacity: {25vh: 0, 50vh: 1}"
·
data-animation="
opacity: {100vh: 0, 130vh: 1},
transform: {
100vh: translate3d(0, -25vh, -100vh) rotateX(70deg),
150vh: translate3d(0, 30vh, -100vh) rotateX(70deg),
175vh: translate3d(0, 0, -50vh) rotateX(0),
200vh: translate3d(0, 0, 0) rotateX(0)
}
    "