Skip to main content
100%

Gist 54bcba37ab92767d6ea819d7b4c7b3e4

✓ Published0🌍 Public
Aabernier
Last edited Aug 15, 2016
Created on Aug 15, 2016

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.

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
73% match
Loading thumbnail…

Gist b5b1465342d4885de179

This animated visualization demonstrates a carousel interface built with Backbone.js, where items cycle through views with smooth transitions. The code uses a Backbone View to manage carousel behavior, including previous/next navigation controls and automatic item rotation. The animation renders the carousel's items dynamically, updating the active element as users interact with the controls. The visualization relies on jQuery for DOM manipulation and Underscore for utility functions, with the Backbone framework providing the structural foundation for the view logic.

Aabernier
72% match
Loading thumbnail…

Gist 0da4d2561e574cd4e3e6b65e215c3939

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.

Aabernier
70% match
Loading thumbnail…

slider

A range slider input automatically advances in ten-step increments every second, moving from zero to one hundred. The visualization demonstrates a timed sequence control using basic HTML and JavaScript, with D3.js handling DOM selection and attribute updates. The code employs the `setInterval` function to trigger a recurring update, while `d3.select` modifies the slider's value property. A console log tracks the progression, and the timer clears once the maximum value is reached. This example highlights a simple animation loop without underlying dataset visualization.

Aaaizemberg
69% match
Loading thumbnail…

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

EEelsie
69% match
Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Aashpradhan01123
69% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
68% match
Loading thumbnail…

Gist 7416538

A rotating carousel cycles through a list of slider frames, each displaying a distinct visual effect. The code uses `requestInterval` to trigger frame transitions every four seconds, removing the first frame and appending a cloned copy to the end. Stylus styles define three transition effects—fade, scroll-down, and scroll-left—using CSS `transition` properties with `transform: translate3d` and opacity changes. The example demonstrates pure CSS-based animation without a charting library, relying on DOM manipulation and hardcoded item dimensions for offset calculations.

Aakre54
68% match