January 9, 2026
Makes your design feel more alive, fluid, and natural
Adding interaction to a static screen is not just about making elements move—it’s about bringing life, flow, and a sense of natural response into your design. Thoughtfully designed interactions react to user input, create rhythm, and help users intuitively understand what’s happening on the screen. In this article, I’ll introduce JavaScript libraries you can apply directly to your own designs, along with practical examples and code you can use right away.
Along the way, I’ll reference examples from the official documentation and pair them with my own implementations. The code shared here includes both officially provided references and my own interpretations—researched, adapted, and implemented to translate those ideas into a practical web context.
GSAP (GreenSock Animation Platform)
GSAP is a high-performance JavaScript animation library designed for creating precise and expressive motion on the web. It goes beyond simple visual effects, offering fine-grained control over timing, easing, and sequencing—making it ideal for interaction design where motion needs to respond naturally to user input and system states.
What sets GSAP apart is its reliability and flexibility in complex scenarios such as scroll-based interactions, chained animations, and dynamic UI feedback. With tools like timelines, designers and developers can structure motion as a clear, intentional flow, ensuring animations feel consistent, purposeful, and deeply integrated into the overall user experience.
How to use
Load the script
Load the script with a script tag (a CDN link is available)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
Or, run 'npm install gsap' and import the module
npm install gsap
The basic effect
To add effect to type, svg or anything you want, follow the basic grammar at the below.
gsap.from("#titleName", {
delay: 0.5,
y: 20,
opacity: 1,
ease: "expo.inOut"
});
// gsap.from is used to animate an element from a specified starting state to its current state.
gsap.to("#titleName", {
delay: 0.5,
y: 20,
opacity: 1,
ease: "expo.inOut"
});
// gsap.to is used to animate an element from its current state to a specified end state.
Example
Turn the static up a notch
A static screen isn’t boring—it’s just waiting to move. With GreenSock’s basic animation tools, you can add subtle motion that brings your UI to life. It’s not about flashy effects, but about small, responsive cues that feel natural.
<h1 id="basicUsage">Basic turning up effect</h1>
gsap.from("#basicUsage", {
delay: 0.5,
y: 20,
opacity: 1,
ease: "expo.inOut"
});
Animate at the Right Moment with ScrollTrigger
Not everything should appear at once. ScrollTrigger reveals animations exactly when users reach the right point on the page, guiding attention smoothly without breaking the flow.
<h1 id="scrollTrigger">scrollTrigger example</h1>
gsap.from("#scrollTrigger", {
delay: 0.5,
y: 20,
opacity: 1,
ease: "expo.inOut"
scrollTrigger: {
trigger: "#scrollTrigger",
start: "top 80%"
}
});
Make It Interactive with Draggable SVG
Watching animations is nice. Touching them is better. With GSAP’s Draggable plugin, users can click and drag elements, turning motion into direct interaction—and passive viewing into exploration.
<div id="svg-wrap">
<svg version="1.1" class="svg-layer" id="svg_layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g class="gsap-img-wrp">
<img width="120" xlink:href="ca/ca_img/gsap/gsap_1.png">
</g>
</div>
</div>
Draggable.create(".gsap-img-wrp", {
type: "x,y",
bounds: "#svg-wrp",
overshootTolerance: 0
});
TypeIt
TypeIt.js is a JavaScript library that makes it easy to create flexible, dynamic typewriter effects for the web. For easy usage in a wide variety of projects, TypeIt's ready to go in multiple different packages such as Vanilla JS, WordPress and React.
It's free for use in any prersonal or open source project! For a less restrictive commercial license, choose one of the follwing: Limited Commercial License($9) or Unlimited Commercial License ($29).
How to use
Load the script
Load the script with a script tag (a CDN link is available)
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
Or, run 'npm install typeit' and import the module
import Typeit from "typeit";
Configure your animation
Choose an element to target, define what to type, pick your other options, and kick it off.
new TypeIt("#element", {
strings: "This is my string!",
speed: 75,
loop: true,
}).go();
Example
Basic usage
At it's most basic level, just target an element, define a string, and voilà.
<p id="simpleString"></p>
new TypeIt("#basicString", {
strings: "This is a simple string.",
speed: 50,
waitUntilVisible: true,
}).go();
Multiple strings
To type multiple strings that stack on top of each other, pass an array of them.
<p id="multipleStrings"></p>
new TypeIt("#multipleStrings", {
strings: ["This is a grest string.", "But here is better one."],
speed: 50,
waitUntilVisible: true,
}).go();
Type fine-grained, life-like effects
Use the included instance methods to control the smallest details, including speed, deletions, pausing, and even cursor movement.
<p id="companionMethods"></p>
new TypeIt("#multipleStrings", {
new TypeIt("#companionMethods", {
speed: 50,
waitUntilVisible: true,
})
.type("I'm merely a vessel for the Lord")
.pause(1000)
.delete(32, { delay: 1000 })
.type("You're not to think you're always light")
.pause(1000)
.move(-4)
.pause(1000)
.delete(1)
.type("r")
.pause(1000)
.move(5)
.pause(1000)
.type(" like this")
.pause(1000)
}).go();
ScrollOut
ScrollOut is a JavaScript microlibrary that detects scroll/resize changes in the browser and assigns attributes and live CSS Variables to the scrolling element and a list of targets. The ScrollOut library does not handle any animation, but it gives you the elements and tools needed to create animations & transitions with JavaScript animation libraries or only CSS!
How to use
Load the script
Load the script with a script tag (a CDN link is available)
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
Or, run 'npm i scroll-out -s' and import the module
npm i scroll-out -s
Perfom a fade with CSS
Add these codes to your html and css. You must add "data-scroll" beside section tag, not name of class!
<section data-scroll>
<h1 class="title">Scroll on down</h1>
<p class="description">Lorem ipsum</p>
</section>
[data-scroll] {
opacity: 0;
will-change: transform, scale, opacity;
transform: translateY(6rem) scale(0.93);
transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll='in'] {
opacity: 1;
transform: translateY(0) scale(1);
}
[data-scroll='out'] {
opacity: 0;
}
Example
Basic usage
This is the basic form of ScrollOut. Just up there, I used CSS code, but in this time I will make it visible using JavaScript.
ScrollOut({
onShown: function (el) {
el.animate([{ opacity: 0 }, { opacity: 1 }], 1000);
},
onHidden: function (el) {
el.style.opacity = 0;
}
});
ScrollOut and TypeIt
Apply multiple effects using TypeIt.js. If you would like to learn more about TypeIt.js
<p id="scrollout-typeit-title">ScrollOut with TypeIt</p>
ScrollOut({
targets: '.scrollout-typeit-title',
onShown: (element) => {
new TypeIt(element, {
startDelay: 500,
cursor: false,
)}
.pause(2000)
.go();
},
});
Relllllax loading
Give your web various interaction. Add class to "rellax" and property of data-rellax-scroll. And of course, cdn of rellax.js!
<div class="img-wrapper rellax" data-scroll data-rellax-speed="-4">
<img src="rellax_img.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>
[data-scroll] {
opacity: 0;
will-change: transform, scale, opacity;
transform: translateY(6rem) scale(0.93);
transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll='in'] {
opacity: 1;
transform: translateY(0) scale(1);
}
[data-scroll='out'] {
opacity: 0;
}
ScrollOut();
let rellax = new Rellax('.rellax');
Matter
Matter.js is a JavaScript physics engine that enables 2D physics simulations directly in the browser. It allows developers to implement real-world physical behaviors—such as gravity, collisions, friction, and restitution—using relatively simple code on Canvas or SVG. Because of this, Matter.js is widely used in interaction-driven UIs, experimental web experiences, games, and rapid prototyping.
How to use
Load the script
Load the script with a script tag (a CDN link is available)
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
Or, run 'npm install matter-js' and import the module
npm install matter-js
The base code for Matter.js examples
To render shapes with matter.js to the so called "world", you first have to create it with a few simple initializations. These are few more module aliases we have set up so it is easier to reference the matter library.
let Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Composites = Matter.Composites,
Constraint = Matter.Constraint,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Events = Matter.Events;
let engine;
let render;
let runner;
