Gist 0da4d2561e574cd4e3e6b65e215c3939

100%

Gist 0da4d2561e574cd4e3e6b65e215c3939

✓ Published0🌍 Public

Last edited Aug 15, 2016

Created on Aug 15, 2016

This example shows how to build and compose multiple animation timelines using the GSAP (Global Scripting Animation Platform) library. It defines reusable functions, `anim1` and `anim2`, which create their own `TimelineMax` objects and populate them with tweens. The tweens animate properties like `borderWidth` and use `TweenMax.staggerFromTo` to create a staggered effect on a collection of elements, including a `force3D` transformation. The main script then combines these two timelines into a single parent timeline and rescales the total duration.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist bb77ce7178ad897fb479533651191948

This example pairs a dat.GUI control panel with two GSAP timelines to animate text in a Mozilla Hubs scene. It shows a FizzyText object whose message can be edited live, while sliders for “jump_anim” and “scale_anim” scrub through pre-defined timeline animations. The sliders call `tl_scale.seek(value*1000)` and `tl_jump.seek(value*1000)` on change, mapping slider positions to millisecond offsets. The code also positions the GUI with `gui.domElement.style.marginRight`, demonstrating direct DOM styling alongside the animation controls.

UUtopiah

70% match

Loading thumbnail…

Gist 54bcba37ab92767d6ea819d7b4c7b3e4

This interactive animation demonstrates a timeline-based playback control system for scrubbing through temporal data. The visualization pairs a draggable slider and numeric time input with keyboard shortcuts (space, arrow keys, P, N) to navigate and reverse playback. Built on jQuery and GSAP’s TimelineMax, the code uses `totalProgress()` and `totalTime()` to synchronize the controls with the animation state. The data source is a local timeline object, with rendering handled entirely through DOM manipulation and GSAP’s tweening engine rather than a charting library.

Aabernier

70% match

Loading thumbnail…

Gist 324400fd51b08d5e22d9e2f3b164d087

An interactive WebXR scene displays a star model that animates through a sequence of scale and position changes. The star scales up and down while simultaneously jumping vertically, creating a looping visual effect. The code uses A-Frame and the anime.js library, specifically `AFRAME.ANIME.default.timeline`, to build two synchronized timelines: one targeting the star’s `object3D.scale` and another targeting its `object3D.position`. The star originates from a Google Poly asset loaded via `getFirstElementFromHash`. The animation restarts both timelines and seeks to a specific time offset to align the motion.

UUtopiah

64% match

Loading thumbnail…

GSAP - 3 sections - Animations only

Three text sections frame a hero video that animates open and expands using GSAP timelines. The page uses a video background that moves upward, then transitions from a narrow vertical strip to full width via `clipPath` animations. Surrounding decorative square columns and corner blocks slide up and outward, creating a layered reveal effect. The animations are triggered on load and are purely visual, with no scroll-based interaction.

Aantonio-rodrigues

63% match

Loading thumbnail…

FFT-based transition on timelines

This example demonstrates a three-stage transition between two erratic timelines, using simplified path versions to make the morphing easier to follow. The initial path first simplifies, then morphs into the final path’s simplified form, and finally complexifies into the final shape. Two models compute these simplifications: a Fast Fourier Transform (FFT) and a Moving Average. The code uses D3.js v4 with SVG and animated transitions, applying `d3.line` and `d3.curveBasis` to render the paths, with data from a CSV file.

KKcnarf

63% match

Loading thumbnail…

JavaScript tips

This animated slideshow presents JavaScript coding tips and techniques, covering ES6 modules, destructuring, monkey patching, node.js binary scripts, and animation patterns. The code examples demonstrate practical implementations using TweenMax for timeline-based animations, including a draw/anim pattern and a 1-second reference scaling approach. It also showcases event handling for CSS transitions and transform property detection. The rendering uses code blocks with syntax highlighting, and the animation presents each tip sequentially, with the source gist serving as the data for the displayed content.

Aabernier

63% match

Loading thumbnail…

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

IIan

61% match

Loading thumbnail…

Gist 77910f3bc3d3df6fc05e2f58f4d0ec1f

This animation demonstrates a force-directed network visualization where nodes and links reposition over time using D3.js’s `d3.forceSimulation` for physics-based layout. A standard `d3.transition().duration(750)` animates the movement of elements smoothly. The data comes from an external gist source, rendered as an animated SVG or canvas scene. The transition updates positions each tick, while the simulation’s velocity and collision constraints drive the final arrangement. The code relies on D3’s transition API, specifically `transition.attrTween` or similar, to interpolate coordinates between frames, making the network appear to fluidly settle into a stable configuration.

Aadamjanes

61% match