Animating Views/On Load

[bflopez]

I am in an Angular app and I am trying this with both Motion UI standalone and the one packaged with Foundation Apps.

My issue is if I want to use Motion UI Javascript, it is executed before DOM elements are loaded so it does not work. I tried to follow the docs and setting this up using UI router.

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'login/login.html',
            controller: 'LoginCtrl',
            authenticate: false,
            animation: {
                enter: 'slideInRight',
                leave: 'fadeOut'
            }
        })
        .state('dashboard', {
            url: '/dashboard',

            views: {
                '': {
                    templateUrl: 'dashboard/dashboard.html',
                    controller: 'DashboardCtrl'
                },
                'current-status-module@dashboard': {
                    templateUrl: 'current-status/current-status.html'
                },
                'alerts-module@dashboard': {
                    templateUrl: 'alerts/alerts.html',
                    controller: 'AlertCardsCtrl'
                },
                'alert-cards-module@dashboard': {
                    templateUrl: 'alerts/alert-cards/alert-cards.html'
                },
                'zones-module@dashboard': {
                    templateUrl: 'zones/zones.html'
                },
                'map-grid-module@dashboard': {
                    templateUrl: 'zones/zone-map/zone-map.html'
                }
            },
            authenticate: true,
            animation: {
                enter: 'fadeIn',
                leave: 'fadeOut'
            }
        })

I also made sure all the modules were included in my App

var dashboardApp = angular.module('dashboardApp', [
'ui.router',
'ngAnimate',
'ui.grid',
'ui.grid.pagination',
'ui.grid.autoResize',
'ui.grid.selection',
'config',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'

])

I also made sure the distribution files are linked in the index.html

This is my HTML. I have a few attributes in there because at this point I was just trying things.

<section id="cards" animation-in="fadeIn" data-animate="fadeIn">
        <ul class="main-cards">
            <li ng-repeat="card in cards" class="card" animation-in="fadeIn" data-animate="fade-in">
                <div class="flip-container"
                     ng-click="fetchBackOfCardData(card)"
                     analytics-on="click"
                     analytics-event="Flip Card"
                     analytics-category="Current Status Cards"
                     analytics-label="{{card.title}}"
                     onclick="this.classList.toggle('selected');">
                    <p>Content</p>
                </div>
            </li>
            <div class="clearfix"></div>
        </ul>

There is this code in the app

var cards = document.getElementById('cards');
MotionUI.animateIn(cards, 'fade-in');

So when I run
MotionUI.animateIn(cards, 'fade-in');
in console after page load it works perfectly.

[gakimball]

Putting animation-in or animation-out on elements won't work unless the plugin is configured for it. The Foundation for Sites and Apps components that support animation all have those hooks, but you can't add those attributes to any element and have it go.

It looks like you got something working—can you clarify what you want to accomplish that you haven't yet figured out?