Is there a way to make a CSS animation not run till the object animated isn't visible?

Question

So, I have some animations running on a page that I'm working on, and I'd like to know if there's a way to make the animations NOT run 'till the animated element(s) are visible on-screen

I've already done some research but the things I have tried (a couple of scripts, actually) didn't work..

Sorry for the size of the CSS code, it's the animation and I left the comment there because I didn't write the animation code.

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>


<i class="fas fa-at text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>

The expected results are, like above, for the animation to begin once the user has scrolled down enough so the element being animated is visible on the screen. Right now the problems I have seen arise are that the animation just starts once the page loads, without the icon being visible, and 2, the animation not happening at all.

You could go write the basic javascript to compare `window.innerHeight` and the element space from the top and yada yada, or could just use a small library like [wowjs](https://wowjs.uk/) and just change your class to `class="fas fa-at wow text-pop-up-top"` — Chris W., Oct 22 '19 at 20:54
Possible duplicate of [Check if element is into view and add class if so](https://stackoverflow.com/questions/28333866/check-if-element-is-into-view-and-add-class-if-so) — APAD1, Oct 22 '19 at 21:08
@ChrisW. great tool and thank you for pointing me to it, but it doesnt work in this case because the animations are just code, where the js tool you recommended needs to be pointed towards a library to work. I'm looking into the recommendation of the js script you told me to try and write. APAD1, I'll check the other post at once, thanks! — xXnikosXx, Oct 22 '19 at 21:31
"pointed towards a library" ....not sure what you mean by that. It's literally just a javascript file but whatever's clever. — Chris W., Oct 22 '19 at 21:35
@ChrisW. "Link to the CSS animation library Link to Animate.css (You can link to another CSS animation library by changing wow.js settings)" https://wowjs.uk/docs.html I'm not using a library so that's not possible.. — xXnikosXx, Oct 22 '19 at 21:38

score 1 · Accepted Answer · answered Oct 22 '19 at 21:50

Since I'm guessing you're new to code of all sorts, here's a quick example using wowjs and since you stated you tried and it didn't work I can only guess you didn't initialize it, or the file path to the js file you should have saved locally is not correct. Either way, run the snippet attached and cheers!

new WOW().init();

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>

<h1>scroll down....</h1>
PS, notice we don't care about any animate.css stuff at all..
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>


<i class="fas fa-at wow text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>

Is there a way to make a CSS animation not run till the object animated isn't visible?

1 Answers1