Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Elastic Animation - Gsap Typing CST Test
Elastic Animation — Gsap Code
Animates a div with an elastic ease effect.
# gsap/demo/elastic.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
</head>
<body>
<div id="elasticBox" style="width:100px;height:100px;background:lime;"></div>
<script>
gsap.to('#elasticBox', { x: 300, duration: 2, ease: 'elastic.out(1, 0.3)', repeat: -1, yoyo: true });
</script>
</body>
</html>Gsap Language Guide
GSAP (GreenSock Animation Platform) is a high-performance JavaScript library for creating complex animations in the browser. It provides an easy-to-use, robust API for animating DOM elements, SVGs, canvas objects, and even WebGL/Three.js content, with precise control over timing, easing, and sequencing.
Primary Use Cases
- ▸DOM element animations for websites
- ▸SVG and vector graphic animations
- ▸Canvas and WebGL (Three.js) animations
- ▸Scroll-triggered and timeline-based UI effects
- ▸Interactive and gamified web interfaces
Notable Features
- ▸High-performance, hardware-accelerated animations
- ▸Timeline management for sequencing multiple animations
- ▸Ease of use with chainable API
- ▸Cross-browser consistency and fallbacks
- ▸Plugins for scroll, morphing, text, and physics-based animations
Origin & Creator
GSAP was created by Jack Doyle (GreenSock) in 2008 and has since become the industry standard for JavaScript-based animations, maintained by a professional team with open-source contributions.
Industrial Note
GSAP is widely used in interactive marketing, high-end UI/UX animations, banner ads, website transitions, data visualization animations, game UIs, and creative coding projects that demand precise, performant, and complex motion.
Quick Explain
- ▸GSAP abstracts complex animation logic into simple, chainable commands.
- ▸Supports tweening of numeric properties for DOM, SVG, canvas, and JavaScript objects.
- ▸Provides timelines for synchronized and sequenced animations.
- ▸Includes plugins for scroll-triggered animations, morphing, text effects, and more.
- ▸Runs smoothly across browsers with minimal performance overhead.
Core Features
- ▸Tween - animates object properties over time
- ▸Timeline - sequences multiple tweens
- ▸Easing functions - control motion dynamics
- ▸Plugins - extend functionality (ScrollTrigger, MorphSVG, etc.)
- ▸GSDevTools - debugging and performance tools
Learning Path
- ▸Start with basic tweens and durations
- ▸Learn easing and callbacks
- ▸Explore timelines for sequencing
- ▸Add ScrollTrigger and other plugins
- ▸Integrate GSAP with frameworks and WebGL
Practical Examples
- ▸Fade in/out elements on page load
- ▸Slide elements along X/Y axes with easing
- ▸Morph SVG shapes
- ▸Scroll-triggered animations using ScrollTrigger
- ▸Animate 3D objects in Three.js scenes
Comparisons
- ▸GSAP vs CSS transitions: more precise and powerful
- ▸GSAP vs Anime.js: GSAP more feature-rich and performant
- ▸GSAP vs Lottie: GSAP better for custom JS animations, Lottie for JSON vector animations
- ▸GSAP vs Velocity.js: GSAP more modern and maintained
- ▸GSAP vs ScrollMagic: ScrollTrigger is GSAP’s integrated scroll plugin
Strengths
- ▸Smooth, high-performance animations even under heavy load
- ▸Works with DOM, SVG, canvas, and WebGL objects
- ▸Highly extensible with official plugins
- ▸Precise control over timing, delays, and easings
- ▸Industry-standard with large community and professional support
Limitations
- ▸Proprietary license for some advanced plugins (commercial use)
- ▸Overkill for simple CSS transitions
- ▸Learning curve for complex timelines and callbacks
- ▸Requires JavaScript knowledge
- ▸Bundle size may impact very lightweight projects
When NOT to Use
- ▸Simple hover transitions -> CSS may suffice
- ▸Projects with very limited JS budgets
- ▸Animations purely defined by CSS keyframes
- ▸Legacy environments without JS support
- ▸If you only need static motion with no interactivity
Cheat Sheet
- ▸gsap.to(element, {duration: 1, x: 100});
- ▸gsap.from(element, {opacity: 0, y: 50});
- ▸const tl = gsap.timeline();
- ▸tl.to('#box', {x: 100}).to('#box', {y: 50});
- ▸gsap.registerPlugin(ScrollTrigger);
FAQ
- ▸Is GSAP free? -> Core is free; some plugins are paid for commercial use.
- ▸Does GSAP work on mobile? -> Yes, cross-browser and mobile-friendly.
- ▸Can GSAP animate SVGs? -> Yes, fully supported.
- ▸Do I need to know CSS animations? -> Helpful but not mandatory.
- ▸Can GSAP integrate with Three.js? -> Yes, widely used in 3D scenes.
30-Day Skill Plan
- ▸Week 1: Tweens and easing fundamentals
- ▸Week 2: Timelines and sequencing
- ▸Week 3: Scroll-triggered animations
- ▸Week 4: SVG and text animations
- ▸Week 5: Advanced integration with Three.js or frameworks
Final Summary
- ▸GSAP is the industry-standard JS animation library.
- ▸Provides precise, performant, and complex motion control.
- ▸Supports DOM, SVG, canvas, and WebGL content.
- ▸Extensible with plugins for scroll, text, morphing, and more.
- ▸Foundation for professional, interactive, and high-performance web animations.
Project Structure
- ▸index.html - main HTML content
- ▸main.js - GSAP animation scripts
- ▸assets/ - images, SVGs, or media files
- ▸modules/ - reusable animation functions
- ▸styles/ - CSS for initial layout and styling
Monetization
- ▸Premium website animations for marketing
- ▸Interactive UI/UX for commercial apps
- ▸Animated banner campaigns
- ▸Gamified web experiences
- ▸Creative coding services with GSAP expertise
Productivity Tips
- ▸Reuse timelines and tweens
- ▸Use plugins for complex effects
- ▸Debug with GSDevTools
- ▸Optimize DOM and GPU-heavy properties
- ▸Modularize animations for maintainability
Basic Concepts
- ▸Tween - animates one or more properties over time
- ▸Timeline - sequences and synchronizes multiple tweens
- ▸Easing - controls animation acceleration and deceleration
- ▸Callback functions - run code at specific animation points
- ▸Plugins - enhance GSAP functionality with extra effects