Tiny animation engine
Green
light
Motion
A featherweight alternative to GSAP. Data-attribute driven. Scroll-scrub. Text split. Stagger. Inertia. Zero dependencies.
~4kb
gzipped
0
dependencies
60fps
performance
01 — Core Animations
Animate anything.
GLM.to(), data attributes, or both. Transforms, filters, opacity — everything is batched into a single rAF for peak performance.
Transform
Translate Y
Smooth vertical translation with easing
Transform
Rotate & Scale
Combined rotation with scale spring
Stagger
Stagger Children
Cascade through child elements with delay
Filter
Blur Filter
Animate CSS filter-blur with data attributes
Clip Path
Masked Reveal
Animate
data-glm-prop-clippath
with inset-based reveals.
Reveal
02 — Text Split
Split & reveal text.
Split text into characters, words, or lines. Combine with stagger for fluid reveal animations.
Design is intelligence made visible — every pixel, every frame, every transition.
Masked split example
Hidden outside the parent until every character slides into place.
03 — Scroll Scrub
Scroll-linked motion.
Tie animation progress directly to scroll position. Scrub forward and backward with sub-pixel precision, then optionally smooth the catch-up for faster wheel and trackpad input.
04 — Scroll Trigger Depth
Depth through motion.
Depth layers driven entirely by scroll trigger attributes. Each shape scrubs at a different offset without a dedicated parallax helper.
05 — Interactive Triggers
Hover. Click. React.
Attach animations to hover and click events with data attributes. Target other elements using CSS selectors.
Hover → scale + rotate
Click → elastic spin
Hover → blur + shrink
Hover → lift + fade
06 — Mouse Trigger
Follow the cursor.
Use
data-glm-trigger-mouse
to map mouse movement to transform, scale,
opacity, and filter values. Add
data-glm-animate-once
to keep the last position instead of resetting.
Mouse
Reset On Idle
Move inside the stage. When you stop or leave, the orb eases back to center.
move mouse
returns to rest
Mouse
Sticky Position
With
data-glm-animate-once
, the last mouse-driven state remains after you stop moving.
move mouse
holds last state
07 — Mouse Cursor
Custom cursor objects.
Use
data-glm-mouse-object
to replace the cursor inside any region with a custom element.
Fade and scale appearance are optional, and hover targets can trigger an extra scale-up state.
Plugin
Cursor Region
Move through the region to see the custom cursor, then hover the blocks to scale the cursor object even more.
Hover the field
custom cursor active
Scale target
Scale target
Track motion
Fade on enter
Drag
08 — Magnetic Cursor
Elements that follow.
Magnetic effect — elements subtly gravitate toward the cursor on hover. Perfect for CTAs and interactive elements.
Explore
Learn
Build
09 — Draggable
Drag with boundaries.
Add
data-glm-draggable
to any element.
Pass a selector to keep it constrained inside a limit container, with smooth motion and inertia on release.
Plugin
Bounded Drag
Drag the block and release it. It keeps moving with inertia, but never leaves the dashed boundary.
limit: #drag-limit-demo
Drag
10 — Slider
Carousel with drag.
Configure rows per device, attach any blocks as arrow controllers, enable loop mode, toggle drag inertia with a data attribute, enable wheel or trackpad scrolling, and map slider velocity into your own CSS property.
11 — Easing Library
GSAP-grade easings.
All the classics: power1–4, back, elastic, bounce, circ, expo, sine — plus custom cubic-bezier and steps. Click any easing to preview.
power1.out
power2.out
power3.out
power4.out
back.out
back.in
back.inOut
elastic.out
elastic.in
bounce.out
bounce.in
circ.out
expo.out
sine.out
ease-in
ease-out
ease-in-out
12 — Data Attributes
Zero JavaScript required.
Add data attributes to any HTML element. GLM auto-inits the animation engine on page load, and can also read matching `–glm-*` variables from `.glm-class-*` CSS classes.
<!– Fade-in on scroll into view –>
<div
data-glm-trigger-view
data-glm-prop-translateY
=
„50px”
data-glm-prop-opacity
=
„0”
data-glm-easing
=
„power3.out”
data-glm-duration
=
„0.8”
>
<!– Treat attribute props as .to() values instead of .from() –>
<div
data-glm-trigger-view
data-glm-to
data-glm-prop-translateY
=
„50px”
data-glm-prop-opacity
=
„0.4”
data-glm-duration
=
„0.8”
>
<!– CSS class-driven config via –glm-* variables –>
.glm-class-rise {
–glm-trigger-view: true;
–glm-prop-translateY: 50px;
–glm-prop-opacity: 0;
–glm-duration: 0.8;
}
<div
class
=
„glm-class-rise”
>
<!– Scroll-scrub with blur filter –>
<div
data-glm-trigger-scroll
data-glm-prop-filter-blur
=
„20px”
data-glm-prop-translateY
=
„100px”
data-glm-scrub-smooth
=
„0.12”
data-glm-scrub-max-step
=
„0.04”
>
<!– Stagger children on view –>
<div
data-glm-trigger-view
data-glm-stagger
data-glm-stagger-delay
=
„0.1”
data-glm-prop-translateY
=
„30px”
data-glm-prop-opacity
=
„0”
>
<!– Text split with char stagger –>
<h2
data-glm-split
=
„chars”
data-glm-prop-translateY
=
„40px”
data-glm-prop-opacity
=
„0”
data-glm-stagger-delay
=
„0.03”
>
<!– Masked text split reveal –>
<h2
data-glm-split
=
„chars”
data-glm-mask
data-glm-prop-translateY
=
„110%”
data-glm-prop-opacity
=
„0”
data-glm-stagger-delay
=
„0.02”
>
<!– Clip-path reveal –>
<div
data-glm-trigger-view
data-glm-prop-clippath
=
„inset(0% 100% 0% 0%)”
data-glm-easing
=
„power3.out”
data-glm-duration
=
„1”
>
<!– Draggable inside boundary selector –>
<div
id
=
„limit-box”
>
<div
data-glm-draggable
=
„#limit-box”
>
</div>
<!– Slider with responsive rows and controller selectors –>
<div
data-glm-slider
data-glm-slider-row
=
„3”
data-glm-slider-row-tablet
=
„2”
data-glm-slider-row-mobile
=
„1”
data-glm-slider-free-scroll
data-glm-slider-inertia
data-glm-slider-inertia-prop
=
„–slider-skew”
data-glm-slider-inertia-minmax
=
„-7, 7”
data-glm-slider-inertia-units
=
„deg”
data-glm-slider-inertia-strength
=
„0.035”
data-glm-slider-speed
=
„0.8”
data-glm-slider-snap-speed
=
„1”
data-glm-slider-scroll
=
„1”
data-glm-slider-scrollsnap
=
„1”
data-glm-slider-left-arrow
=
„.leftarrow”
data-glm-slider-right-arrow
=
„.rightarrow”
data-glm-slider-loop
data-glm-slider-snap
>
<!– Mouse trigger area –>
<div
data-glm-trigger-mouse
=
„.mouse-area”
data-glm-prop-translateX
=
„36px”
data-glm-prop-translateY
=
„24px”
data-glm-prop-scale
=
„1.15”
>
<!– Magnetic button –>
<button
data-glm-magnetic
data-glm-magnetic-strength
=
„0.35”
data-glm-magnetic-ease
=
„0.08”
>
<!– Custom cursor region –>
<div
data-glm-mouse-object
=
„.cursor-template”
data-glm-mouse-fade
data-glm-mouse-scale
data-glm-mouse-scale-object
=
„.cursor-target”
>
<!– Click trigger on external element –>
<div
data-glm-trigger-click
=
„#my-button”
data-glm-prop-scale
=
„1.5”
data-glm-easing
=
„elastic.out”
>
Default attribute mode = from
`data-glm-to` = to
`.glm-class-*` reads `–glm-*` from CSS
Class config can also opt into `to` mode
13 — JavaScript API
Full programmatic control.
For complex sequences, use the JS API directly.
GLM.to()
Animate from current state to target values. Returns a controllable Tween.
GLM.from()
Set initial values, then animate back to element’s natural state.
GLM.fromTo()
Full control — define both start and end animation states explicitly.
GLM.timeline()
Sequence tweens with position offsets. Chain .to() calls with timeline offsets like -0.3s or +0.2.
GLM.scrollTrigger()
Link tween progress to scroll position with scrub, pin, and markers.
GLM.splitText()
Split into .chars, .words, or .lines arrays for targeted animation.
GLM.set()
Apply transform, filter, and opacity states immediately before or between tweens.
GLM.magnetic()
Cursor-following magnetic attraction with configurable strength and ease.
GLM.draggable()
Drag elements freely or constrain them inside a boundary element via selector.
GLM.slider()
Responsive carousels with drag inertia, snapping, looping, and external arrow controls.
// Tween
GLM
.
to
(
‘.box’
, { translateY:
‘100px’
, opacity:
‘0.5’
}, {
duration:
0.8
,
ease:
‘elastic.out’
,
stagger:
0.1
,
onComplete: () =>
console
.
log
(
‘done’
)
});
// Timeline
const
tl =
GLM
.
timeline
();
tl.
to
(
‘.hero’
, { opacity:
‘1’
}, { duration:
0.5
})
.
to
(
‘.title’
, { translateY:
‘0px’
}, { duration:
0.8
},
‘-=0.3’
);
// Scroll scrub
GLM
.
scrollTrigger
({
trigger:
‘.panel’
,
start:
‘top 80%’
,
end:
‘bottom 20%’
,
scrub:
true
,
scrubSmooth:
0.12
,
scrubMaxStep:
0.04
,
animation:
GLM
.
to
(
‘.panel’
, { rotate:
‘360deg’
}, { paused:
true
})
});
// Text split
const
split =
GLM
.
splitText
(
‘.heading’
, { type:
‘chars’
});
GLM
.
to
(split.chars, { translateY:
‘0px’
, opacity:
‘1’
}, {
stagger:
0.03
,
ease:
‘power3.out’
});
// Draggable with boundary
GLM
.
draggable
(
‘.card’
, {
boundary:
‘.canvas’
});
// Slider
GLM
.
slider
(
‘.carousel’
, {
perRow:
3
,
perRowTablet:
2
,
perRowMobile:
1
,
speed:
0.8
,
snapSpeed:
1
,
scroll:
1
,
scrollSnap:
1
,
leftArrow:
‘.leftarrow’
,
rightArrow:
‘.rightarrow’
,
loop:
true
,
snap:
true
});
14 — Smooth Scroll
Butter-smooth scrolling.
Enable lerp-based smooth scrolling with a single call. Wraps your content in a fixed container and interpolates scroll position for that silk-like feel.
// Wrap content in a container and enable smooth scroll
// HTML: <div id=”smooth-wrapper”>…all content…</div>
const
smooth =
GLM
.
smoothScroll
({
content:
‘#smooth-wrapper’
,
lerp:
0.08
});
// Destroy when needed
smooth.
kill
();
Smooth scroll code example (disabled on this WordPress demo)
GLM.smoothScroll({ content: ‘#page-content’, lerp: 0.08 })
// Minimal page structure
<div
id
=
„page-content”
>
…
</div>
// Enable smooth scrolling after DOM is ready
GLM
.
smoothScroll
({
content:
‘#page-content’
,
lerp:
0.08
});
Window Scroll
native input
Lerp
interpolated position
#page-content
translated container
Explorează
ZMI
0770.731.346
0232.266.553
Administrativ şi secretariat:
0770.741.599 office@zmi.ro B-dul Tudor Vladimirescu Nr. 32, Sc. B, 700310, Iași România© 2026 Toate drepturile rezervate ASOCIAȚIA ZONA METROPOLITANĂ IAȘI.