How can i make my CSS text animation occur only when a user scrolls down to that page

Question

p.amt is basically my about me summary, however the about me section is at the bottom of my web page, i want the text to only slide across when a user scrolls down to that section, instead of the animation occurring the moment the web page loads.

p.amt {
            position: relative;
            color: white;
            bottom: var(--vamt);
            font-size: 20px;
            font-family: "Comic Sans MS", cursive, sans-serif;
            animation: amtslide 4s 1;
            left: 50px;
        }

    @keyframes amtslide {
            0% {text-align:left; left:-1500px;}
            25%{text-align:left; left:-1000px;}
            50% {text-align:left; left:-500px;}
            100% {bottom: var(--vamt); left: 50px;}
        }

Does this answer your question? [Activate CSS3 animation when the content scrolls into view](https://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view) — Cue, Mar 14 '20 at 02:50

score 0 · Accepted Answer · answered Mar 14 '20 at 01:25

This can be accomplished using the Waypoints jQuery Plugin

Add this to your index.html:

<script src="js/jquery.waypoints.min.js"></script>

Inside your .js file:

$(document).ready(function() {
$('.p.amt').waypoint(function() {
$('.p.amt').css({
animation: "amtslide 4s 1",
opacity: "1"
});
}, { offset: '75%' });

The offset percentage refers to the percentage of the window height at which to trigger the animation. This particular offset will trigger when the top of the element is 75% of the way from the top of the window.

How can i make my CSS text animation occur only when a user scrolls down to that page

1 Answers1