A slider that uses hovering to view different photos.

Use GSAP modifier plugin to create the infinite effect.

Add hover detection for direction changes.

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.

Demos developed by Karly