Menu icon Foundation
Motion UI Animations On Scroll

Hello All,

Is there a way to use Motion UI Animations on Scroll?

I have it working using:

//app.js
$('.animation-wrapper').addClass('is-animating');

but obviously not on scroll, it runs all animations at once.

I would prefer not to include any other components as this already works with foundation 6 out of the box.

$('.animation-wrapper').addClass('is-animating');
            

         

motionuimotionjqueryyetijs

Hello All,

Is there a way to use Motion UI Animations on Scroll?

I have it working using:

//app.js
$('.animation-wrapper').addClass('is-animating');

but obviously not on scroll, it runs all animations at once.

I would prefer not to include any other components as this already works with foundation 6 out of the box.

$('.animation-wrapper').addClass('is-animating');
            

         
Rafi Benkual over 3 years ago

You can pair Motion UI with Wow.js. That would be a cool tutorial for someone to make. http://mynameismatthieu.com/WOW/

Jonas Marlo Loerken over 3 years ago

I'm using waypoints.js, quite cleaner in my opinion.

http://imakewebthings.com/waypoints/

Bind the waypoints.js (I prefer the jQuery vesion) script in the footer and add this to your app.js


         $(document).foundation();
      if(matchMedia){
        var matchingMediumAndLargeScreens = matchMedia('only all and (min-width: 680px)');
        if(matchingMediumAndLargeScreens && matchingMediumAndLargeScreens.matches){
          $('.animation-wrapper)').waypoint(function(direction){
            if(direction === 'down'){
              $(this).addClass('is-animating');
            }
          }, { offset: '0%' });
        }
      }  

giovanni rivera about 1 year ago

 How were you able to implement waypoints into Foundation-ZURB?

I try so many different ways and no luck