Adding animation - Adding events on Slide Animation Start and End

[esbm]

Is there a built in way to have the copy and images animate in as you navigate from slide to slide? If not, does anyone have a solution they recommend? I tried using http://scrollrevealjs.org/ but it's really buggy.

Heres what I have so far: https://www.npd.com/latest-reports/longitudinal-data/

I appreciate any help or suggestions.

Thanks, Elliot

[esbm]

I also just noticed that scrolling for Alton doesn't work on Firefox (even without the animation). Does anyone know of a way to fix this?

[ntan97]

Hey @esbm I'll be trying to look into the firefox issues he asap.

What I think might help is if we build in some events that fire after slide transition is finished, and when it's started so we can start to trigger some of the animations you're talking about, and provide further extensibility in that regard.

This is my thoughts on getting what you're talking about quickly, and then I'll possibly look into creating a default animations for reveal.

I'll update the issue to reflect this and I'll keep it updated as I add things.

[TannerHolm]

I'm also seeing an issue with firefox not working at all, is there a solution for this?

[sebastien-fauvel]

Hi @esbm,

if I understand correctly, we wanted to do exactly the same, with CSS animations being "replayed" on each slide whenever it is being scrolled into view.

Here is our solution to replay animations only once:

$(function () {
    if ($('.alton').length) {
        var oversized = false;
        var $window = $(window);
        var windowHeight = $window.height();
        $('.alton .full-screens .full-screen').each(function () {
            var height = $(this).outerHeight();
            if (height > windowHeight) {
                oversized = true;
            }
        });
        if (!oversized) {
            $(document).alton({
                fullSlideContainer: 'full-screens',
                singleSlideClass: 'full-screen',
                useSlideNumbers: false,
                bodyContainer: 'alton'
            });
            var isInViewport = function ($element) {
                var elementOffsetTop = $element.offset().top;
                var elementHeight = $element.outerHeight();
                var windowScrollTop = $window.scrollTop();
                var windowHeight = $window.height();
                if (elementOffsetTop >= windowScrollTop + windowHeight) {
                    return false;
                }
                if (elementOffsetTop + elementHeight <= windowScrollTop) {
                    return false;
                }
                return true;
            };
            $('.animation-group').each(function () {
                var $animationGroup = $(this);
                if (!isInViewport($animationGroup)) {
                    $animationGroup.data('restart-animation', true);
                }
            });
            var restartAnimations = function () {
                $('.animation-group').each(function () {
                    var $animationGroup = $(this);
                    if ($animationGroup.data('restart-animation') && isInViewport($animationGroup)) {
                        $animationGroup.data('restart-animation', false);
                        $('.animated', $animationGroup).each(function () {
                            var $animatedElement = $(this);
                            var $placeholder = $animatedElement.clone().css('visibility', 'hidden');
                            $animatedElement.replaceWith($placeholder);
                            setTimeout(function () {
                                $placeholder.replaceWith($animatedElement);
                            }, 0);
                        });
                    }
                });
            };
            $(document).on('scroll', restartAnimations);
        }
    }
});

See https://www.darwinpricing.com/ for a live demo :)

Hope it helps!