Learn how to use kreative scroll

Make your research faster

Kreative Scroll

Settings

selector

the CSS selector of the element to animate.

transform

determines which types of transformations will be applied and to what extent. The letters mean: x, y (translations with default units in px, or specified in vh/vw with xvh, xvw, yvh, yvw), r (rotation), s (scale), o (opacity). Without precision, the units are in px.

trigger

the percentage of the element visible in the viewport when the animation begins.

duration

the duration of the animation in seconds.

scrollSpeed

the parameter for controlling the scrolling speed of an animation

easing

type of animation easing: ease, ease-in-out, linear

pauseOnScroll

if true, the animation stops when you stop scrolling.

onLoad

if true, the animation begins as soon as the page is loaded.

draggable

if true, the elements can be moved with the mouse or finger.

gravity

if true, the elements fall back to their initial position when released after being moved.

applyBorderRadius

if true, a border radius effect is applied.

startBorderRadius

the starting border radius size for the border radius effect.

endBorderRadius

the ending border radius size for the border radius effect.

borderRadiusControl

the position of the border radius ("top", "bottom" or "both").

colorEffect

if true, a color change effect is applied.

hover

if true, the animation is triggered when the element is hovered over.

arcBorderRadiusEffect

if true, an arc-shaped border radius effect is applied.

arcSize

the size of the arc for the arc border radius effect.

arcPosition

the position of the arc ("top" or "bottom").

arcDirection

the direction of the arc ("inward" or "outward").

startArcSize and endArcSize

the size of the arc at the beginning and end of the animation.

Trigger

Example Code

HTML

Copy 
<div class="small_square square small__square__up example1__square active"></div>
<div class="small_square square small__square__down example1__bis__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example1__square",
    trigger: 0.25,
    transform: "20xvw",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

new AnimationScroll({
    selector: ".example1__bis__square",
    trigger: 0,
    transform: "20xvw",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}


.small_square {
    height: 200px;
    width: 200px;
}

Scroll Speed

Example Code

HTML

Copy 
<div class="small_square square small__square__up example1__square active"></div>
<div class="small_square square small__square__down example1__bis__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__scrollspeed__square",
    trigger: 0,
    transform: "20xvw",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

new AnimationScroll({
    selector: ".example__scrollspeed__bis__square",
    trigger: 0,
    transform: "20xvw",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 1.5,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}


.small_square {
    height: 200px;
    width: 200px;
}

Translation

Example Code

HTML

Copy 
<div class="square example__translation__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__translation__square",
    trigger: 0,
    transform: "20xvw",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Rotation

Example Code

HTML

Copy 
<div class="square example__rotation__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__rotation__square",
    trigger: 0,
    transform: "20xvw 90r",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Scale

Example Code

HTML

Copy 
<div class="square example__scale__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__scale__square",
    trigger: 0,
    transform: "20xvw 1.5s",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Skew

Example Code

HTML

Copy 
<div class="square example__skew__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__skew__square",
    trigger: 0,
    transform: "20xvw 15k",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Border Radius

Example Code

HTML

Copy 
<div class="square example__radius__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__radius__square",
    trigger: 0,
    transform: "20xvw",
    applyBorderRadius: true,
    startBorderRadius: 0,
    endBorderRadius: 50,
    borderRadiusControl: 'both',
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Arc Border Radius

Example Code

HTML

Copy 
<div class="square example__arcradius__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__arcradius__square",
    trigger: 0,
    transform: "20xvw",
    arcBorderRadiusEffect: true,
    arcSize: 30,
    arcPosition: 'top',
    arcDirection: 'inward',
    startArcSize: 50,
    endArcSize: 0,
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Text color

Example Code
Hello world

HTML

Copy 
<div class="square example__textcolor__square active">  Hello world </div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__textcolor__square",
    trigger: 0,
    transform: "20xvw",
    colorEffect: true,
    startTextColor: "#ffffff",
    endTextColor: "#000000",
    startColor: "#000000",
    endColor: "#ffffff",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Gravity

Example Code

HTML

Copy 
<div class="square example__gravity__square rectangle active"></div>
<div class="square example__gravity__square rectangle active"></div>

JavaScript

Copy 
new AnimationScroll({
selector: ".applyGravity",
onLoad: false,
gravity: {
    selector: ".square",
    containerSelector: ".applyGravity",
    speed: 0.1,
    duration: 1
}
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Draggable

Example Code

HTML

Copy 
<div class="square example__draggable__square active">  Hello world </div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__draggable__square",
    trigger: 0,
    transform: "0",
    draggable: true,
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Inner Scroll

Example Code

HTML

Copy 
<div class="square example__skew__square active"></div>

JavaScript

Copy 
new AnimationScroll({
    selector: ".example__skew__square",
    trigger: 0,
    transform: "20xvw 15k",
    easing: "ease-in-out",
    duration: 2,
    onLoad: false,
    scrollSpeed: 0.7,
    pauseOnScroll: true
});

CSS

Copy 
.square {
    position: absolute;
    border-radius: 15px;
    background-color: var(--color-green);
    height: 256px;
    width: 256px;
    top: 40%;
    left: 45px;
    transform: translate(50%, -50%);
}

Kreative Text

Settings

selector

the CSS selector of the element to animate.

effect

Determines the effect to apply to the selected element.

trigger

The percentage of the element visible in the viewport when the animation begins.

onLoad

if true, the animation begins as soon as the page is loaded.

duration

the duration of the animation in seconds.

speed

the speed at which an effect is carried out. The lower the value, the faster the effect.

hover

if true, indicates that the animation should be triggered on hover of the element

invisibleOutsideTrigger

if true, indicates that the element should be made invisible outside the trigger point

direction

indicates the direction of the animation: "up" or "down", only works for the slideEffect

colors

indicates the different colors to use for the scaleIn animation.

Shuffle

Example Code

Hello world

HTML

Copy 
<div class="example__shuffle__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__shuffle__text",
    effect: "shuffle",
    speed: 50,
    duration: 0.5,
    trigger: 0,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Typing

Example Code

Hello world

HTML

Copy 
<div class="example__typing__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__typing__text",
    effect: "typing",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Bounce

Example Code

Hello world

HTML

Copy 
<div class="example__bounce__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__bounce__text",
    effect: "bounce",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Slide

Example Code

Hello world

HTML

Copy 
<div class="example__slide__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__slide__text",
    effect: "slide",
    speed: 200,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Valley

Example Code

Hello world

HTML

Copy 
<div class="example__valley__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__valley__text",
    effect: "valley",
    speed: 200,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Wave

Example Code

Hello world

HTML

Copy 
<div class="example__wave__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__wave__text",
    effect: "wave",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Bouncing

Example Code

Hello world

HTML

Copy 
<div class="example__bouncing__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__bouncing__text",
    effect: "bouncing",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Flip

Example Code

Hello world

HTML

Copy 
<div class="example__flip__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__flip__text",
    effect: "flip",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ScaleIn

Example Code

Hello world

HTML

Copy 
<div class="example__scaleIn__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__scaleIn__text",
    effect: "scaleIn",
    speed: 50,
    duration: 0.75,
    colors: ['#f44336', '#2196f3', '#4caf50'],
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Bubble

Example Code

Hello world

HTML

Copy 
<div class="example__bubble__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__bubble__text",
    effect: "bubble",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Center Bubble

Example Code

Hello world

HTML

Copy 
<div class="example__centerbubble__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__centerbubble__text",
    effect: "centerbubble",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Flip & Rotate

Example Code

Hello world

HTML

Copy 
<div class="example__flipRotate__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__flipRotate__text",
    effect: "flipRotate",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Slide & Rotate

Example Code

Hello world

HTML

Copy 
<div class="example__slideAndRotate__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__slideAndRotate__text",
    effect: "slideAndRotate",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Diagonal Fade In

Example Code

Hello world

HTML

Copy 
<div class="example__diagonalFadeIn__text">  Hello world </div>

JavaScript

Copy 
new TextAnimation({
    selector: ".example__diagonalFadeIn__text",
    effect: "diagonalFadeIn",
    speed: 100,
    duration: 1,
    trigger: 0,
    invisibleOutsideTrigger: true,
    onLoad: true,
    hover: false
});

CSS

Copy 
h3 {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Kreative Smooth

Initialize

To initialize smooth scroll on your site, simply link to the kreativesmooth script. At the bottom of this script, you'll find a configuration that lets you modify the smooth scroll on your site. The lower the value, the smoother the effect.

document.addEventListener('DOMContentLoaded', () => {
    const smoothScroll = new SmoothScroll(0.02);
});