A slider that uses hovering to view different photos.

Use GSAP modifier plugin to create the infinite effect.

Add hover detection for direction changes.

Add and remove map features and customize their colors. 

Add random chicagoland markers and watch the map bounds zoom to keep the markers in view

Click anywhere on the page to add a bouncing ball with a random color. Then adjust various attributes of the environment, including the speed of the balls and the gravity applied to them.

Uses html5 canvas in a React functional component. Collision detection and physics are applied manually within requestAnimationFrame. Makes use of some handy custom hooks,  useAnimationFrame and useGetterState.

Demonstrating the use of react-globe with ThreeJS

The page eases to a stop when the user stops scrolling.

A content wrapper is set to position fixed with the overflow set to hidden so that its child can be moved. The body will get the height of the content set to it, so that we preserve the scrollbar. When scrolling, the fixed wrapper will stay in place while we animate the inner content. This trick makes a simple yet effective smooth scrolling behavior possible.

Multiple examples of "sticky" animations.

Element positions are updated based on the user's scroll position. CSS and JavaScript only. No third-party libraries needed! See logic notes below:

Can't use the sticky value for positioning because it's not supported by IE.

Set the element's position to absolute. Position the element based on where it should be before it becomes fixed to the screen.

Create a class with the position set to fixed.

Create a class with the position set to absolute and the element positioned to the bottom of its container.

Create a scroll listener that tracks the element's container height and where the element is located in the viewport.

Toggle the different classes based on if the element is above, in the middle, or below the viewport.

Elements in a grid or row can animate from a random position to a predetermined position or vice versa

React. Uses requestAnimationFrame, react refs, and hooks

Users can click and drag to change their view inside the sphere. Uses an equirectangular projection image wrapped onto a sphere.

Users can use mouse and arrow controls to move around the 3D scene.

Users can click and drag to change their view. Uses skybox technique with six images projected on all the inner sides of a cube.