12 TweenMax.js Examples
TweenMax, a part of the GSAP (GreenSock Animation Platform) suite, enables powerful and fluid animations for web elements. In this collection, you’ll find examples showcasing how to animate DOM elements, control timelines, chain transitions, and create engaging interactive effects using TweenMax’s intuitive API.
Last updated:
Draggable Drink Water Slider with GSAP and SVG
An interactive SVG slider using GSAP Draggable, where the drag progress animates not only the filling of a bottle via an SVG mask but also creates a liquid sloshing effect using modifiers.
Coloron Game
This interactive mini-game is a showcase for modern front-end development, utilizing GSAP’s TweenMax for smooth, complex ball and scene animations, and a well-structured ES6 class system to manage the game logic, score, and responsive scaling.
Procedural Low Poly Planet with Three.js
A WebGL 3D scene where IcosahedronGeometry is transformed into a unique planet using Simplex noise, featuring dynamic land/water distribution and interactive scaling of vegetation on hover.
Animated Infographic
Dive into a technically complex animated infographic where all visual effects, including SVG element transformations and interactive dialogues, are synchronized using the high-performance GSAP library for precise timing control.
Insta-hearts ❤ (GSAP MotionPath)
This interactive demo leverages GSAP’s MotionPathPlugin to generate unique, randomized cubic Bézier paths on click, ensuring a fresh and highly organic animation sequence every time.
rgbKineticSlider (WebGL Transitions)
This dynamic slider utilizes a displacement map to render cinematic transitions, while finely tuned cursor momentum guarantees a smooth and highly responsive kinetic interaction across all devices.
Loading Cube 3D Animation
An isometric 3D animation leveraging Three.js and an OrthographicCamera to create a fixed, “flat” perspective; the GSAP Timeline precisely controls the complex, repeating movement and rotation of the central cube.
Icon Grid Follow Mouse Effect (GSAP & Canvas)
A demo of how GSAP and Canvas 2D work together to create a grid of elements that react to the cursor using smooth vector transformation.
Airport Distance Map with Vue, D3 and GSAP
This demo integrates Vue.js reactivity with D3.js for map projection and rendering, using GSAP’s MorphSVGPlugin to draw and animate a dynamic flight path. It calculates the real-world distance between two draggable markers based on geodesic coordinates.
Useless Checkbox with React and GSAP
A demonstration of the powerful React and GSAP integration: logic based on random limits determines the animation path and the dynamic alteration of SVG elements upon checkbox interaction.
Bootstrap 5 Carousel
A cinematic slider orchestrating Swiper for state management and GSAP for synchronized motion.