Collection of free jQuery reveal animation examples from Codepen and GitHub.

Related Articles:

  1. CSS Reveal Animations

Author

  • Cameron Knight

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Reveal Animation Using GSAP ScrollTrigger

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Shunya Koide

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Logo Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • creme

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

OffScreen Element Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js, splitting.js

Author

  • Fabio Ottaviani

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation v.2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Fabio Ottaviani

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation

Scroll down to reveal the image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dan

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Text Reveal Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: materialize.css, materialize.js

Author

  • Julien Lejeune

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scroll Animations - Revealed Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • adstyles

Links

Made with

  • HTML / CSS / JS

About a code

Circle-Masked Block Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Eric Porter

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scroll Image Reveal Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, waypoints.js

Author

  • Davs Howard

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Text Blind-Reveal Animation

Animating in multiple lines of text in a blind-like reveal fashion.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Leena Lavanya

Links

Made with

  • HTML / CSS / JS

About a code

Reveal Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Hektor Wallin

Links

Made with

  • HTML / CSS (Less) / JS

About a code

Scroll Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nikolay Talanov

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Hover to Reveal Part of Background Image

This is really simple demo. All what you need is div with background-attachment: fixed and change of left+top on mousemove.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mahir Shah

Links

Made with

  • HTML / CSS / JS

About a code

Image Tile Reveal

Cool and light image reveal transformation on hover. CSS3 animation, with 4 lines of JS! Hover over image preview to see full image tiles move in place!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -