search

graingert / WOW

Reveal CSS animation as you scroll down a page
https://wowjs.uk
Other
1.61k stars 1.54k forks source link

How to use wow to activate css animations on scroll? #19

Open emmadalby opened 6 years ago

emmadalby commented 6 years ago

I have some percentage circles on my page and they are further down the page as a lot of content is above it - e.g;

lots of content pushing the circles down the page so that you can't see them circles I'm trying to animate on scroll I would like to know how to use wow to be able to activate the circle's animation when I scroll down to them as at the moment they are activating when I cannot see them.

My code is here: https://codepen.io/digitalbydefault/pen/LJYPXw

Please, can anyone point me in the right direction?

thanks

CharlesKumar commented 5 years ago

how to use wow to be able to activate the circle's animation when I scroll down to them ...

Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it. see docs

NOTE: wow.js is temporarily deprecated in favour of AOS (Animate on Scroll). Feel free to ignore the warning if you can't use AOS. see here

Also check scrollOut that detects changes in scroll for reveal, parallax, and CSS Variable effects! sal.js A Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. (you may need to use polyfills when using sal.js)

emmadalby commented 5 years ago

Hi @CharlesKumar

Thanks for your reply. I sorted this a while ago but I appreciate it.

I did not know it was temporarily deprecated until now. Why is this?

CharlesKumar commented 5 years ago

Hi @emmadalby,

The deve[oper/maintainers of this project are not interested in updating this library. (updating like bug fixing, adding new features, reducing lib file size or providing slim version, improving browser compatibility, improving performance, etc.,)

why - they may think other libraries like aos.js (or any other) is already doing that, so there is less need to (contemporarily) maintaining a similar libray.

NOTE: I use lot of deprecated libraries. The reason is there is no worries about security issues while using event/animation libraries. It just works as i expect it to be. I only move to other libraries if i need performance, compatibility badly otherwise i am fine with old libraries. Code is beautiful ! Sharing is caring ! open source is boon !