av afterviewport.js

Scroll down to check examples you can obtain with afterviewportjs.

All examples use the data-av-resets attribute, to let you see multiple times the animation scrolling down and up this page.

View on Github
View on NPM

Basic animation on scroll.

<... data-av ...>

Basic animation on scroll with inline property.

<... data-av data-av-inline ...>

Basic animation with parallax effect.

<... data-av data-av-parallax ...>

Animation with parallax effect with different depths.

<... data-av data-av-parallax="n" ...>

Basic animation on scroll with custom animation duration.

<... data-av
data-av-animation-duration="n" ...>

Basic animation on scroll with custom animation delay.

<... data-av
data-av-animation-delay="n" ...>

Basic sequential within a group.

<... data-av
data-av-sequential ...>

Sequential within a group using a different order sequence.

<... data-av
data-av-sequential="n"...>

Basic animation but triggered only when the elements are fully in the viewport.

<... data-av
data-av-only-when-totally-in...>

Basic animation on scroll with style 2.

<... data-av data-av-animation="av-style-02" ...>

Basic animation on scroll with style 3.

<... data-av data-av-animation="av-style-03" ...>

Basic animation on scroll with style 4.

<... data-av data-av-animation="av-style-04" ...>

Basic animation on scroll with style 5.

<... data-av data-av-animation="av-style-05" ...>

Basic animation on scroll with style 6.

<... data-av data-av-animation="av-style-06" ...>

Basic animation on scroll with style 7.

<... data-av data-av-animation="av-style-07" ...>

Basic animation on scroll with style 8.

<... data-av data-av-animation="av-style-08" ...>

Basic animation on scroll with style 9.

<... data-av data-av-animation="av-style-09" ...>

Basic animation on scroll with style 10.

<... data-av data-av-animation="av-style-10" ...>

Basic animation on scroll with style 11.

<... data-av data-av-animation="av-style-11" ...>

SVG only. Drawing animation on scroll with style 12. SVG must have a visible stroke, fill-only shapes won't be affected. Powered by animejs.

<svg... data-av data-av-animation="av-style-12" ...>

Basic animation on scroll with style 13.

<... data-av data-av-animation="av-style-13" ...>

Basic animation on scroll with style 14.

<... data-av data-av-animation="av-style-14" ...>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita dolores laudantium, nesciunt voluptates modi nemo iste atque sunt tempore necessitatibus corrupti doloremque dolorum eius odit quos ipsa ex obcaecati porro?

Basic animation on scroll with typewriter animation.

<... data-av data-av-typewriter data-av-sequential ...>