Book page flip animation triggered by user scrolling the viewport. 

Based on a GSAP codepen example. Animations uses ScrollTrigger and CSS transform properties.

Interactive bar charts and pie charts built with a data-analysis library D3.

A multi-layer parallax effect triggered by user scrolling. Animation does not apply to mobile browsers.

Parallax effect uses only CSS perspective properties. Image assets are PNGs of the same height and width. 

Globe animation originally designed for National Geographic DOW Infographic website. The 3D object responds to page scrolling, and toggles to a fully interactive map.

Three.js is used to construct the globe map. GSAP connects the globe's rotation and x-position to page scroll. Intersection Observer is the primary tool for progressing through tween timelines as well as adding 'sticky' classnames to images. In this demo, the globe rotation animation is achieved by updating the orbit controls & camera instead of rotating the actual 3D sphere. The clouds png and function for converting marker coordinates (lat, long) to vector (x, y, z) are borrowed from react-globe npm package.

3D Objects are animated by user interaction.

This page uses Three.js and ScrollMagic. The cube object is generated using Three.js primitive shapes and its rotation is manipulated manually on scroll. The fish and windmill are loaded from .gltf models. They have built-in 'animation clips' that are played or paused based on user interection.

Animate the appearance of an SVG's path on page load or other user interaction. Scroll down.

This demo uses gsap's DrawSVG plugin and ScrollMagic. ScrollMagic is only used on screen widths > 768. There are four svg elements involved - the skyline and each 'section' has its own svg element.

Custom animations are applied to svg elements by morphing their <path> data.

GSAP's MorphSVG plugin is used with Tween or Timeline to animate svg elements' <path>. Animation can be triggered by user interaction like hover or when completely visible using Intersection Observer.

Demos developed by Delilah