Menu icon Foundation
Delaying Animation until visible in Viewport

So I finally got Motion UI running, thanks to the forum (Unfortunately the post was blocked so I couldn't say thanks). I was wondering if anyone has come up with a way to fire the animations when they are in the viewport. I looked into mui-series but I don't think that would solve the problem. I'm looking for a solution like Chris Coyier's (https://css-tricks.com/slide-in-as-you-scroll-down-boxes/). I tried to adapt it to my project but I get the same div repeating the animation every time I touch the mouse.

motion-uiviewportanimations

So I finally got Motion UI running, thanks to the forum (Unfortunately the post was blocked so I couldn't say thanks). I was wondering if anyone has come up with a way to fire the animations when they are in the viewport. I looked into mui-series but I don't think that would solve the problem. I'm looking for a solution like Chris Coyier's (https://css-tricks.com/slide-in-as-you-scroll-down-boxes/). I tried to adapt it to my project but I get the same div repeating the animation every time I touch the mouse.

Geoff Kimball almost 4 years ago

There's not a feature for this right now, but if you had a basic JavaScript library that could add a class on page scroll, you could use it with mui-series(). The class mui-series() is looking for is .is-animating.