This is Animotion

Use this step by step guide to add amazing and sleek interactions to your Web projects.

Try out the free features, then Go Pro for more.

Install Script

GSAP Tween

GSAP Props

ScrollTrigger

SplitText

GSAP Timeline

Trigger

Interactions

Responsiveness

Mouse Trigger

Video on Scroll

Video Clip-Path

Integrations

For more advance setups like Three JS, Shaders etc.

Three JS

Shaders

Before we start

This documentation provides full, step‑by‑step documentation for the custom GSAP animation engine called Animotion. It explains every available feature, the reason it exists, how it works internally, and how to use it in real projects, progressing from basic usage to advanced, production‑level interactions.

Add this <script> to your <body> tag

Please note * Always add required GSAP scripts before adding Animotion to your <body> tag. The script drive all available Animotion features, and will automatically updates to the latest version, to be sure that you are on the current version, always update the script to @current version. The current version right now is: 5.0.7

<script src="https://cdn.jsdelivr.net/npm/animotion-saply@latest/dist/animotion-saply.min.js"></script>

Tween

A Tween is what does all the animation work - think of it like ahigh-performance property setter. You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly.

Step 1\ Add GSAP

Initialize GSAP. This attribute is required for all Animotion setup to work perfectly.

Name

data-gsap

Value

true

Step 2\ Add (to, from, set, fromTo) tween type

Add tween. You can use values like (to), (from), (set), (fromTo)

Name

data-gsap-type

Value

to

Properties

Properties are the way we can declare what CSS property we want to animate, or control.

Step 3\ Add GSAP config

Add tween. You can use values like (to), (from), (set), (fromTo)

Name

data-gsap-props

Value

{"":,"":}

Config Example: to, from, set

{"y":100,"opacity":0}

Config Example: fromTo

{"from":{"scale":0},"to":{"scale":1},"duration":1}

Please note that using single & double quotation works just fine.

Timeline

Use the timeline to create more controlled tween and combine animations.

Option A \ Adding a Timeline

Element-Level Auto play

Name

data-gsap-timeline

Value

sampleTM

Name

data-gsap-timeline-auto

Value

true

Add a * data-gsap-props and * data-gsap-type to add the actual animation.

Format

data-gsap data-gsap-timeline="hero" data-gsap-timeline-auto="true" data-gsap-props='{"y":0,"opacity":1}

Option B \ Multiple Tweens in One Timeline

Format

<h1 data-gsap data-gsap-timeline=hero data-gsap-props={"y":0,"opacity":1}></h1><p data-gsap data-gsap-timeline=hero data-gsap-props={"y":0,"opacity":1}></p>

Controlling Tween Placement (position)

Format

<p data-gsap data-gsap-timeline=hero data-gsap-props={ "opacity":1, "y":0, "position":"<" }>

Position Rules (GSAP Standard)

">"
After previous tween (default)

"<"
Start with previous

"+=0.3"
Delay from previous

"0"
Absolute timeline time

Timeline Playback Controls

Name

data-gsap-control

Value

.play|click|hero|play

Format

<button data-gsap-control=".play|click|hero|play">Play</button>

Position Rules (GSAP Standard)

play
Play forward

pause
It pause

reverse
Plays reverse

restart
restart from 0

toggle
Play / pause

seek:0.5
Jump to progress

timeScale:2
Speed control

progress:0.25
Set progress

Mouse-Controlled Timeline Scrubbing

Name

data-gsap

Value

Name

data-gsap-timeline

Value

Timeline name

Name

data-gsap-mouse-props

Value

{"":,"":{"":"","":"","":}}

Name

data-gsap-mouse-timeline

Value

Timeline name

Format

<div data-gsap-mouse-area><div data-gsap-mouse-item data-gsap-mouse-props='{ "x": 15, "y": -10, "rotation": 5, "scale": 1.05 }'> Hover Me</div></div>

ScrollTrigger Inside Timelines

<div
data-gsap data-gsap-timeline="hero"
data-gsap-type="from"
data-gsap-props='{ "y": 100, "opacity": 0 }'>
Step 1</div>
‍
<div
data-gsap-timeline-def="hero"
data-gsap-timeline-config='{ "scrollTrigger": { "trigger": ".hero", "start": "top top", "end": "bottom top", "scrub": true } }'
class="hero"></div>

SplitText Inside Timelines 1

Timeline Definition

<section
data-gsap-timeline-def="hero"></section>

SplitText Inside Timelines 2

Timeline Elements

<h1
data-gsap
data-gsap-timeline="hero" data-gsap-props='{ "splitText": { "type": "chars" }, "y": 60, "opacity": 0, "stagger": 0.5 }'> Hero Title</h1>
‍
<p
data-gsap
data-gsap-timeline="hero" data-gsap-props='{ "splitText": { "type": "words" }, "opacity": 0, "stagger": 0.3 }'>
Supporting copy text</p>

External Trigger

Controlls GSAP animations from outside the animated element itself, using declarative HTML attributes.

External trigger (Recommended)

Name

data-gsap-control

Value

.btn|click|hero|play

Format

selector | event | target | command

Position Rules (GSAP Standard)

play
Play from current position

pause
It pause

reverse
Reverse direction

restart
Restart from beginning

toggle
Play / pause

Interactions

Use these to control or create micro-interactions.

Element-bound trigger (legacy & per-element)

Name

data-gsap-trigger

Value

.btn|click|play

Format

selector | event | command

Examples

Setup

<div data-gsap data-gsap-timeline="hero" data-gsap-props='{"y": 0, "opacity": 1, "duration": 1}'> Hero Text</div>

Controls

<button data-gsap-control=".play-btn|click|hero|play"> Play</button>

Optional \ Multiple triggers supported

Name

data-gsap-trigger

Value

.btn|click|play, .btn|mouseenter|restart

Format

selector | event | command

Supported Commands

play
Play forward

pause
It pause

reverse
Plays reverse

restart
restart from 0

toggle
Play / pause

seek:0.5
Jump to progress

timeScale:2
Speed control

progress:0.25
Set progress

Responsiveness

The responsive animation setup is built on GSAP ScrollTrigger.matchMedia.

Mobile Animation Setup (Simplified Motion)

Name

data-gsap-mobile

Value

{"":,"":{"":"","":"","":}}

Format

<div data-gsap-mobile='{"y": 0,"opacity": 1,"duration": 0.6}'></div>

Mouse Trigger

This system creates continuous parallax-style motion based on the user’s cursor position relative to the viewport.

Mobile Animation Setup (Simplified Motion)

Name

data-gsap-mouse

Value

Format

No value required

Global Mouse Movement Interaction

Name

data-gsap-mouse

Value

{"":,"":{"":"","":"","":}}

Format

{ "movement": 40, "duration": 0.6, "ease": "power2.out" }

Configuration Options

movement
Number | Max movement distance (px-scaled)

duration
Number | GSAP tween duration

ease
String | Any GSAP easing

invert
Boolean | Reverses direction

Mouse Area Interaction (Micro-Interactions)

Name

data-gsap-mouse-area

Value

Name

data-gsap-mouse-item

Value

Name

data-gsap-mouse-props

Value

{"":,"":{"":"","":"","":}}

Format

<div data-gsap-mouse-area><div data-gsap-mouse-item data-gsap-mouse-props='{ "x": 15, "y": -10, "rotation": 5, "scale": 1.05 }'> Hover Me</div></div>

Video on Scroll

This feature maps scroll position → video playback time using GSAP + ScrollTrigger, creating smooth, frame-accurate video scrubbing controlled by scrolling.

Basic Usage (Minimal Setup)

Name

data-gsap-video-url

Value

link to video

Format

<section class="video-section" data-gsap-video-url="/videos/intro.mp4"></section>

Behaviours

trigger
the container element

start
top bottom

end
bottom top

scrub
true

ease
none

autoplay
❌ (scroll-driven)

Controlling Scroll Behavior (Recommended)

Name

data-gsap-video-props

Value

{"":,"":{"":"","":"","":}}

Format

<section data-gsap-video-url="/videos/intro.mp4" data-gsap-video-props='{ 'start': 'top center', 'end': 'bottom top', 'scrub': 1, 'markers': false }'></section>

Supported Scroll Properties

markers
boolean | Debug

start
string | ScrollTrigger startstart

end
string | ScrollTrigger end

scrub
truscrub boolean / number | Smoothness

pauseOnLeave
boolean | Default true

Configuration Options

movement
Number | Max movement distance (px-scaled)

duration
Number | GSAP tween duration

ease
String | Any GSAP easing

invert
Boolean | Reverses direction

Video Styling Rules (Important)

Format

.video-section { position: relative; height: 100vh; overflow: hidden;}

Format

video { width: 100%; height: 100%; object-fit: cover; pointer-events: none;}

Video Clip-Path

This feature maps scroll position → video playback time using GSAP + ScrollTrigger, creating smooth, frame-accurate video scrubbing controlled by scrolling by also clipping the video to a shape.

Enabling Clip-Path Animation (Core Feature)

Name

data-gsap-video-url

Value

link to video

Name

data-gsap-clip-path

Value

polygon(...)

Format

<section class="scroll-video" data-gsap-video-url="/videos/intro.mp4" data-gsap-clip-path="polygon(0 0, 100% 0, 100% 100%, 0 100%)"></section>

CSS

.scroll-video { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); overflow: hidden;}

Fine-Tuning Clip-Path Timing

Name

data-gsap-video-props

Value

{"": ,"": ,"": ""}

Format

{ "start": "top bottom", "end": "bottom top", "clipStart": "top 80%", "clipEnd": "top 30%", "clipScrub": true, "clipEase": "power2.out" }

Clip-specific props

clipStart
Clip ScrollTrigger start

clipEnd
Clip ScrollTrigger end

clipScrub
Independent scrub

clipEase
Clip-path easing

clipMarkers
Debug markers

Video Styling Rules (Important)

Format

.video-section { position: relative; height: 100vh; overflow: hidden;}

Format

video { width: 100%; height: 100%; object-fit: cover; pointer-events: none;}

ScrollTrigger

ScrollTrigger enables anyone to createjaw-dropping scroll-based animationswith minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.

Basic Configuration

Name

data-gsap

Value

true

Name

data-gsap-type

Value

from or any GSAP tween

Name

data-gsap-props

Value

{"":,"":{"":"","":"","":}}

Basic Scroll Interaction

<div data-gsap
data-gsap-type="from"
data-gsap-props='{ "y": 100, "opacity": 0, "duration": 1, "scrollTrigger": { "trigger": ".fade-in", "start": "top 80%", "end": "top 30%", "toggleActions": "play none none reverse" } }'
class="fade-in">
Fade In Content</div>

Scrub-based Interaction

<section data-gsap
data-gsap-type="to"
data-gsap-props='{ "x": 300, "scrollTrigger": { "trigger": ".scrub-section", "start": "top bottom", "end": "bottom top", "scrub": true } }'
class="scrub-section">
Scrub Me</section>

ScrollTrigger with Multiple children (Implicit Children)

<div data-gsap
data-gsap-props='{ "y": 50, "opacity": 0, "stagger": 0.2, "scrollTrigger": { "trigger": ".list", "start": "top 75%" } }' class="list">

<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p></div>

Pin on scroll

<section
data-gsap-scroll-pin='{ "trigger": ".pin-section", "pin": ".pin-section", "end": "+=200%", "animations": [ { "target": ".box", "vars": { "x": 300 } }, { "target": ".text", "vars": { "opacity": 1 }, "position": 0.5 } ] }' class="pin-section">
<div class="box"></div> <
div class="text"></div></section>

For ScrollTriger with timeline setup, Check out the Timeline section.

SplitText

SplitText is a small JavaScript library that splits an HTML element's text into individual characters, words, and/or lines (each in its own, newly-created element), allowing you to create gorgeous staggered animations. It's highly configurable and smarter than other text splitting tools thanks to features like automatic screen reader accessibility, masking for reveal effects, responsive re-splitting, and much more.

Add splittext Configs

Name

data-gsap

Value

true

Name

data-gsap-type

Value

from or any other tween

Name

data-gsap-props

Value

{"":,"":{"":"","":"","":}}

Basic Split setup

<h2 data-gsap
data-gsap-props='{ "splitText": { "type": "chars" }, "y": 40, "opacity": 0, "stagger": 0.6, "duration": 1 }'>
Animated Text</h2>

ScrollTrigger + SplitText

<h3
data-gsap
data-gsap-props='{ "splitText": { "type": "chars" }, "y": 50, "opacity": 0, "stagger": 0.8, "scrollTrigger": { "trigger": ".section", "start": "top 80%", "end": "bottom 60%", "scrub": true } }'>
Scroll Controlled Text</h3>

Advanced: Custom SplitText Options

<h2
data-gsap
data-gsap-props='{ "splitText": { "type": "lines", "linesClass": "split-line" }, "y": 20, "opacity": 0, "stagger": 0.3 }'>
Multi-line Text Block</h2>

For SplitText with timeline setup, Check out the Timeline section.