Activate animations with scrolling -- SOLUTION

[chornbec]

(sorry about formatting... in a rush) Tell us about your environment PC, Window 8.1

---

I've seen people have issues with activating the animation when the user gets to a certain point in the view. For those who don't know, there is something called Waypoint. It uses javascript, jquery, or zepto to activate events (animations) when the user gets to a waypoint specified by you. It offers presets for offsets, like if you're at the bottom or top of a div.

Steps:

1) Download and call waypoint.js in your html head or before /body (with Jquery called BEFORE Waypoint) 2) Bodymovin code:

    var anim;
    var elem = document.getElementById('bodymovin')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: false,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'data.json',
        name: 'myAnimation',
    };
    anim = bodymovin.loadAnimation(animData);

3) Waypoint Code (can be in same .js file):

var waypoint = new Waypoint({
 element: document.getElementById('bottom-in-view-example'),
 handler: function(direction) {
 anim.play();   /*THIS IS WHERE WE PLAY THE ANIMATION*/
 },
   offset: 'bottom-in-view' /* string defined in waypoint.js See documentation for more presets */

})

This ran really smoothly while the js scroll function that I saw in other issue solutions did not.

Problems I ran into while using this:

• running on local machine, Chrome returned an http error, so the animation did not run. You can't run directly from the OS to view with chrome. Use a web server that runs on your computer, then open in chrome.

[juanicarmesi]

@chornbec thanks works perfect!!

[nilooy]

Hello, It's not working for me, Can you give me some suggestions?

[chornbec]

Hey @rezwanferdous, what problems are you encountering? Is the animation static or just not playing at the right time/scroll position. Make sure you check where the start of your waypoint div is (i.e. if you div is much larger than the animation, the animation will play too early)

[nilooy]

hey @chornbec I have solved the probelm. I used jquery scrollTop to get animation working on scrolling. Thank you so much.

[theamazingaprilb]

I'm running into an issue with multiple waypoints- I'm trying to go through the docs and figure it out- but I'd sure appreciate a boost.

I have multiple animation divs set in the page and I need each to load on scroll. I can get the final one to work when I am only loading one. But more than one- and only the bottom one (last one) works. And I get no errors in my console. The second to last animation doesn't ever load.

[chornbec]

@justplaindoug Is this a problem with the second-to-last animation's div? Is the waypoint correctly set as "top of div" or "bottom of div". Perhaps to troubleshoot, you could extend the webpage so that when you scroll, you scroll past the entire animation div and see if the animation is activated...

Send me a gist with the code and animation json and I can try to look at it

[theamazingaprilb]

I'm using the exact same setup for each. Two different divs. The one alone works fine, but the second one doesn't. Rest assured, I have no doubt this is all because I am brand new to waypoints

Gist is at https://gist.github.com/justplaindoug/e96827d047ad1f72f748ff04548369d8

Let me know if you need anything else. I really appreciate this. This opens up a lot of new possibilities- once I get this sorted out. I will owe you a beer.

[theamazingaprilb]

There are two other divs as well. And I'll be putting a fourth one in as well.

[theamazingaprilb]

Here's the full git of the site.

https://github.com/justplaindoug/torch-website

[chornbec]

I might have time to look at this later, but for the waypoint's div, make sure you view where the top and bottom is so that the event correctly fires based on your scroll position.

[bodymovin]

@justplaindoug Hi, it's probably a matter of scope of your variables. You are loading transact.js and engage.js Both are creating a variable called anim, so one overwrites the other one. Try naming them "anim1" and "anim2" on each js and see if it works.

[jiggaman08]

Can anyone post a working git? I am new to scripting and am having a really hard time implementing a waypoint with my animation. I'd be very grateful if there was a successful example I could work from.

[chornbec]

Sure,

Do you have any code to post? Post it in a gist so we know where to start

On Thu, Feb 15, 2018 at 3:53 PM, jiggaman08 notifications@github.com wrote:

Can anyone post a working git? I am new to scripting and am having a really hard time implementing a waypoint with my animation. I'd be very grateful if there was a successful example I could work from.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/608#issuecomment-366073864, or mute the thread https://github.com/notifications/unsubscribe-auth/ARrqyLi0nuh7krOvIZqNA5IUKhWXaczfks5tVKdMgaJpZM4PMLor .

-- Corey Hornbeck Web Designer & Developer Illinois Institute of Technology Linkedin https://www.linkedin.com/in/corey-hornbeck | 708-337-0301 | coreyhornbeck.me

[jiggaman08]

Thanks so much, here is the html I am working with. I have data.json and lottie.js files in the same folder as my index file and I have the waypoint js in a folder called "lib".

https://codepen.io/Dalexander08/pen/VQQaKe

[jiggaman08]

Anyone have any suggestions by any chance? I am lost here.

[chornbec]

Hmm, I'll try to take a look at this tomorrow. What would really help is if you had a gist of all the files so I can test it on my side. Let me know if you need help with that.

• Coreu

On Mon, Feb 26, 2018 at 11:00 AM, jiggaman08 notifications@github.com wrote:

Anyone have any suggestions by any chance? I am lost here.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/608#issuecomment-368571969, or mute the thread https://github.com/notifications/unsubscribe-auth/ARrqyHWxWSwgz8TMCjAp_Kp6_PrYHIjGks5tYuNFgaJpZM4PMLor .

-- Corey Hornbeck Web Designer & Developer Illinois Institute of Technology Linkedin https://www.linkedin.com/in/corey-hornbeck | 708-337-0301 | coreyhornbeck.me

[sifford]

Just curious, has anyone one tried attempting this with ScrollMagic? I've been looking into triggering multiple animations by scrolling through a page and I came across this thread. I was thinking I could use ScrollMagic instead of Waypoint because of the vast tutorials out there, but I can't seem to get any animations to fire off with it. I'll have to take a closer look at waypoint again since this seems to be the only solution out there.

[AntonVoltchok]

@sifford I originally started off with scroll magic , but to sync to scroll or call at certain points I didn't need it. Just made my own update function with request animation frame with a listener on scroll position and total scroll height which is really all I needed (trigger at 30% or total scroll height, and trigger again at 60% of total scroll height. If I wanted to use some of the very specific things scroll magic has, like pinning, etc.. then I would use it, otherwise it's a kind of silly.

From what I remember, Scroll Magic API didn't have anything to feed you the scroll position as it changed so I had nothing to drive the animation with. After I made the event listener myself, I just got rid of scroll magic

[jiggaman08]

@antonvoltchok Would you mind posting your solution that calls the animation at 30% and 60% height?

[AntonVoltchok]

@jiggaman08 It's not literally in percentages -> Get the scroll height (total height of area to scroll through) then say you want something to happen 30% of the way, you do basic math to get the exact number, say you're scroll height is 2000 px, so that's just 2000 multiplied by 0.3 = 600, then setup a basic if statement that calls something to happen when you're 600 px down the page, aka 30% of the way. Make sure you google setting up the listener for the scroll through request animation frame to maintain performance.

[jiggaman08]

@antonvolchok I know.. regardless of percentages or pixels, I’m just trying to see if anyone can post some working files. I keep getting explanations of how to do things and it’s not working, I’m not a developer and don’t really speak the language. If anyone can post a working example of MULTIPLE animations working on one page, triggered at certain points for us newbies to learn it would be extremely helpful.

[sifford]

@AntonVoltchok Thanks for chiming in! I went down the same path as you and ended up chucking scroll magic.

@jiggaman08 I made a crude pen showing how I managed to get lottie and waypoints to work with each other. I'm a nub myself, so I can't quite explain all the magic going on here, but I can say that it works!

Pen: https://codepen.io/tc4d/pen/dmRBVW/

Although I don't have multiple animations on this particular pen, I'm sure you could just duplicate the existing one and renaming it to anim2, anim3, etc.

[bodymovin]

Closing issue since there is no action item related.