SVG Animation with GSAP

Explore how to create marching ants by animating SVG stroke dasharray and dashoffset with GSAP, applying it to lines, rectangles, and more shapes.

Learn to animate SVG strokes with dasharray and dashoffset using GSAP, drawing and erasing lines, rectangles, and curved paths by using get total length to set dash values.

Learn to animate svg strokes with gsap and the draw svg plugin, using start/end values and staggered tweens for complex plane drawings.

Learn to master the DrawSVG plugin to animate strokes, wrapping SVG paths from any start to end state, including center-based drawing and coordinated start and end values.

Learn to convert rectangles to paths in Boxy SVG, add custom split points, and animate multiple rectangles with GSAP, using draw from center, stagger, and opacity distribution.

Animate a ball on a wire in SVG using GSAP, starting with a beginner mode and advancing to pro mode with easing, timelines, and wire bending effects.

Explore how to animate an SVG line by independently tweening the start and end points with GSAP, drawing the path via draw SVG values, onupdate, and quick setter optimization.

Create advanced svg line jumpers with clip paths, holes, and nested gsap timelines. Clip strokes, convert to paths, and animate multiple holes in sequence.

Explore animating svg clip paths with gsap, from tweening the clipping ellipse to animating the clipped image, using inline and external css approaches.

Combine masking and clipping in svg to create a feathered colorization that reveals a color car over a grayscale image, using a gradient mask and greensock timelines.

Build a draggable SVG mask that reveals the bones and green background beneath a fish illustration using GSAP draggable, updating the mask position as you drag for interactive exploration.

Learn to create and animate a custom SVG warp filter with filter primitives, turbulence base frequency, and displacement map scale, then apply the effect to SVG and HTML.

Learn how the SVG goo filter blends draggable shapes with gaussian blur and a color matrix to create smooth, connected forms, using GSAP Draggable for interactivity.

Master hand-coding SVG patterns, setting coordinates, dimensions, and viewbox for fills. Understand pattern units, x and y offsets, and how to reference and animate patterns.

Create and edit svg patterns in boxy svg, apply transforms such as translate, rotate, and scale, and use them across multiple objects for gsap animation.

Learn to animate SVG patterns using GSAP to manipulate individual pattern elements and apply pattern transforms with rotate, scale, and translate, creating seamless looping effects across rectangles.

Learn to hand-code template patterns in Boxy SVG, apply variations with unique transforms, and animate them across multiple elements using simple pattern transforms instead of matrices.

Explore the greensock motion path plugin to make an arrow follow an SVG path with alignment, origin, and rotate. Set start and end values with object syntax for path control.

Explore how to animate multiple SVG motion path followers with GSAP, dispersing them evenly along a path and looping the motion so each circle wraps from end back to start.

Explore dynamic path followers on a blob shape by creating and animating circles along a blob path, filling them with rainbow colors and looping endlessly.

Learn to morph SVG paths with GSAP's MorphSVG plugin, morphing a bat into a butterfly with one line of code, and optimize SVGs with IDs, CSS, and in-place morphing.

Build a simple SVG drawing app that updates a polyline's points with each click, starting from the first click, adding new points, and uses GSAP for visual feedback.

Clone svg elements on click to create new circles with random hsl colors and gentle animations, then use a clear button to remove all circles.

Clone SVG groups with GSAP using the deep clone option and getBBox to center clones on click, while assigning unique IDs and animating the results.

dynamically create SVG elements with code using createElementNS and namespaces, set attributes, and render circles without cloning to understand XML namespaces and proper SVG element creation.

Learn to create dynamic outlines for SVG groups with getBBox, building a reusable show box function to draw bounding boxes around shapes and groups, including transforms and hover effects.

Use getBBox to generate rounded-rectangle outlines behind each tool, then animate a hover reveal with gsap by fading the box's opacity from 0 to 1 and back on leave.

Create dynamic SVG backgrounds with gsap by animating three overlapped rectangles using blend modes and gradients, then explore random timing, timelines, and code organization in CodePen.

Learn to code a scroll driven SVG plant animation using a GSAP timeline to animate leaf one, leaf two, stem growth, center pop, and petals.

Explore scroll-driven svg plant animation with scrolltrigger, pin the svg at center, and scrub the animation with scrolling for precise 1:1 control, including markers and basic options.

Explore a double border svg animation inspired by the ui initiative, using gsap and draw svg to reveal a gradient with opposing translateX motions and masking versus clip paths.

Learn to build a double-border svg animation with gsap, drawing each rectangle’s stroke using drawsvg, overlaying white and red borders to reveal a gradient through nested timelines.

Explore diverse SVG animation techniques for the circle connector challenge, including stroke dash offset, masks, gradient masking, Lottie Lab, and a div-based approach.

Animate a plane along a dashed path with a dynamic viewBox that follows the plane, using GSAP and onupdate to keep the plane centered and zoomed.

Animate an SVG particle effect with GSAP timelines, staggering ellipses to rise and spread, randomize scale, and use masking to hide particles behind the text for a polished look.

Build a live gsap ease visualizer from a simple svg path, load custom easing, and morph the path with the morph SVG plugin to animate between eases.