Menu icon Foundation
Motion-UI on Scroll?

Is it possible to trigger Motion-UI animations/transitions when an element becomes visible on a page? For example, I have an element near the bottom of the page that animates, however, I don't want the animate to trigger until the element is visible.

I'm looking for something similar to how Wow.js works: http://mynameismatthieu.com/WOW/

motion-ui

Is it possible to trigger Motion-UI animations/transitions when an element becomes visible on a page? For example, I have an element near the bottom of the page that animates, however, I don't want the animate to trigger until the element is visible.

I'm looking for something similar to how Wow.js works: http://mynameismatthieu.com/WOW/

Rafi Benkual over 3 years ago

Motion UI can hook in with the Wow.js events pretty easily. Are you looking for more info on how to add it in?

Jeremy Englert over 3 years ago

I'm sure i can wrap my head around it, I just wanted to make sure this wasn't something built in my default to avoid duplicating functionality.

Thanks!

Rafi Benkual over 3 years ago

I think it be cool to write a tutorial on it! I have it on our list.

Kaya Tuerkay over 3 years ago

That would be very helpful. I have the same problem and I am not too familiar with .js therefor it would be grate to have a little explanation on what is triggering what and how to use it.

Kaya Tuerkay over 3 years ago

I 've found the solution for my problem wich was not caused using wow.js with motion ui but wow.js with fullpage.js. Eventually fullpage.js doesn't support parallax animation unless you set scrollbar: "true".
With this wow.js triggers the animation as the content enters the viewport.

Geoff Kimball over 3 years ago

Right now the way the library works, you can integrate Motion UI with a series animation very easily. One-off animations, however, won't work at the moment. This is because one-off animations are designed to play right away, while series animations stay paused until a class is added (which is more aligned with how WOW works).

Here's how you can set up WOW to work with a series animation.

Use these config options:

var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'is-animating'
});

wow.init();

We're changing the animateClass setting to is-animating, which is Motion UI's series trigger class.

Then add the wow class to the parent of your animation series:

<ul class="wow series-thing">
  <li class="series-thing-1"></li>
  <li class="series-thing-2"></li>
  <li class="series-thing-3"></li>
  <li class="series-thing-4"></li>
  <li class="series-thing-5"></li>
</ul>

When .series-thing scrolls into view, it will get the class .is-animating, which will kick off the series.

As for delaying one-off animations until scroll, in a future version of Motion UI we can look at enabling that.

Kaya Tuerkay over 3 years ago

Hi Geoff,

thank you very much. This will help me lot.

Cheers, K.