Display CSS Animations When In Browser Viewport

CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it.

Here's where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run a script when it reaches an element on the page.

Set Up Javascript and Waypoints

Download the latest waypoints and link to the jquery.waypoints.min.js and set up a Javascript firing script.

So the waypoints fire script and waypoints as well as the Animate.CSS file are all loaded.

Fire Up Waypoints

The firing script adds the waypoint to the CSS selector used and then a function is called from that, that applies the two needed classes to fire the animated CSS. Finally, the offset amount determines when to start the animation by the percentage the element is from the top of the browser when the page is scrolled.

1 Comment

  1. Abby Buzon on May 23, 2021 at 5:33 pm

    Hi Beaches!
    Your posts have come in handy many times over the years!
    Question – I’ve seen this same jquery trigger for waypoint in several places throughout the web. My issue is that I want to use the same animation in several places on the page, so using an ID isn’t appropriate.
    How can you get around this, when you want to set the same animation class and waypoint trigger to several items without a #ID selector? Hope my question makes sense.
    Thank you!

Leave all Comment