0

im currently building a website using fullpage js and lottie animations. Now im trying to trigger an animation when the user scrolls to the section with the animation. Here is what i tried: (please note that im very new to js)

$(document).ready(function($) {'use strict';

$('#fullpage').fullpage({
sectionsColor: ['white', '#004E8A', 'white','#004E8A', 'white', '#004E8A', 
'white','#004E8A', 'white'],
anchors:['startseite','pers_vermittler','team','konzept','rechner','mod_portfolio','sicherheit','absatz'],

onLeave: function(index, nextIndex, direction) {
    if( index == 3 && direction == 'down' ) {
    lottie.play('k2an');
  }

(at the end of the body section ->)

<script>
var params = {
    container: document.getElementById('k2an'),
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: 'k2an.json',
};

anim = lottie.loadAnimation(params);

Enrico Bühler
  • 1
  • 1
  • 1

2 Answers2

0

You should be using fullPage.js callbacks to fire your JS animations.

See the example:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

Feel free to also check my video tutorial on how to create animations using fullPage.js state classes.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
-1

Right now im using this approach on a couple production sites. It plays the animation as the user scrolls.

I basically check how much of the animation objects box is visible in the viewport, calculate the total length of the animation (in frames) and then project the percentage to a frame where i gotoAndStop().

var anim = <YOUR LOTTIE ANIMATION OBJECT>

// play around with these
var speed = 1; // speed of animation
var scrollOffset = 0; // start animation sooner / later

function scrollHandler() {
            if (!anim.isLoaded) return;
            p = percentageSeen(e) / 100 - (scrollOffset || 0);
            if (p <= 0 || p >= 1) return

            var length = anim.totalFrames / anim.frameModifier;
            var pos = length * p * (speed || 1);
            anim.goToAndStop(pos);
}

$(window).on('scroll', scrollHandler);




/**
 * returns percentage of scrolling element through viewport
 * 0% until element-middle is at bottom of viewport
 * 100% if element-middle is at top of viewport
 *
 * @param id
 * @returns {number}
 */
function percentageSeen(idOrElement) {
    var $element;

    if (typeof idOrElement === 'object') {
        $element = idOrElement;
    } else {
        $element = $('#' + id);
        if (!$element[0]) return 0;
    }

    var $win = $(window), viewportHeight = $(window).height(),
        scrollTop = $win.scrollTop(),
        elementOffsetTop = $element.offset().top,
        elementHeight = $element.height();


    if (elementOffsetTop > (scrollTop + viewportHeight)) {
        return 0;
    } else if ((elementOffsetTop + elementHeight) < scrollTop) {
        return 100;
    } else {
        var distance = (scrollTop + viewportHeight) - elementOffsetTop - (elementHeight / 2);
        if (distance < 0) return 0;
        var percentage = distance / (viewportHeight / 100);
        if (percentage > 100) return 100;
        return percentage;
    }
}

If you want to only start the animation and let it run (independently of further user-scrolling-behaviour), just use the jquery inview plugin, disable autoplay on your animation and trigger the play() once like this: 

$(".animation-container").one("inview", function() { 
    anim.play()
});
Thomas
  • 446
  • 4
  • 10