Jump to content
Search Community

Firing a Lottie (bodymovin) animation with gsap timeline (scrollTrigger)

Jo Mourad test
Moderator Tag

Recommended Posts

I am almost ashamed to ask this question... i'm starting to code, but never really learned functions and such. Always found bits of answers online (thanks google)

 

So here is my problem. i've been struggling for days now, and it drives me crazy because i don't know how to code it. Pretty sure it's VERY simple:

i have an animated svg (done with lottie - a designer sent it to me) and i can fire the animation on my page no problem. However, it starts on page load. I want it to start when i scroll to a trigger, with  scrollTrigger.

 

Here are my 2 bits of code:

 

// lottie svg anim
var animData = bodymovin.loadAnimation({
	    container: document.getElementById('led-container'),
	    renderer: 'svg',
	    loop: false,
	    autoplay: false,
	    path: '/wp-content/uploads/anims/3-LED-light.json'
	});

//scrollTrigger 

var tl = gsap.timeline({
	      scrollTrigger: {
	        trigger: "#led-container",
	        duration:"100%",
	        markers:true,
	        start: "top 50%"
	      }
	    })
	tl.play()

i KNOW they aren't connected together, and that's the problem... i don't know how to... Maybe with a callback? but again, i don't know how to make a callback... :(

Please help me out!!

Link to comment
Share on other sites

Hey JoMourad and welcome to the GreenSock forums. 

 

You have not provided enough information for us to know the cause of the issue but I have a thoughts on your code:

  • It doesn't look like you connected the Lottie animation to your timeline or ScrollTrigger. You need to do that. Based on your description, you don't need a GSAP timeline at all. Just use ScrollTrigger's .create() method and use a callback (like onEnter) to fire off the Lottie animation.
  • If you have connected the Lottie animation to your timeline or ScrollTrigger somewhere outside of the code that you provided, then the issue might either be the tl.play() that you have (which fires the timeline animation as soon as that's called) or it could be that your ScrollTrigger trigger is already past the start position so it fires when the ScrollTrigger gets initialized. That is actually one of the most common ScrollTrigger mistakes.

Hopefully that's enough to help you figure out the issue. If not, please make a minimal demo of your situation so that we can see what's actually going on:

 

Link to comment
Share on other sites

Ok, thanks for the response. I don't have a codepen demo.. because i really think it's about coding logic, which i don't know about haha!

 

i'm here so far... any ideas? because i know that i have to use a callback, but the problem is i don't know how (again, i'm starting in coding...)

 

Any pointers would help a lot!

 

so far i have been able to come up with this:

 

function playThis() {
	var animData = bodymovin.loadAnimation({
	    container: document.getElementById('led-container'),
	    renderer: 'svg',
	    loop: false,
	    autoplay: true,
	    path: '/wp-content/uploads/anims/3-LED-light.json'
	});
}

ScrollTrigger.create({
	trigger: "#led-container",
	        duration:"100%",
	        markers:true,
	        start: "top 50%",
	        toggleActions:"play null reset reset",
	        onEnter: playThis,

})

But the problem is that instead of playing the animation everytime i scroll into view, it DUPLICATES my #led-container element. i know it's stupid, but i'm going insane...

 

Any ideas?

 

 

_____ UPDATE

 

I GOT IT TO WORK!!!!

 

but i'm sure my code is all over the place and not the right syntax....

 

Anyhow, here it is:

 

var ledData = { 
    container: document.getElementById('led-container'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '/wp-content/uploads/anims/3-LED-light.json'
};
var vertData = { 
    container: document.getElementById('vertical-container'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '/wp-content/uploads/anims/2-vert-growing.json'
};

var ledAnim = bodymovin.loadAnimation(ledData);
var vertAnim = bodymovin.loadAnimation(vertData);

function playLED (animData) {
	ledAnim.play();
}
function playVert (animData) {
	vertAnim.play();
}

ScrollTrigger.create({
	trigger: "#led-container",
	        duration:"100%",
	        markers:true,
	        start: "top 50%",
	        toggleActions:"play null reset reset",
	        onEnter: playLED

})
ScrollTrigger.create({
	trigger: "#vertical-container",
	        duration:"100%",
	        markers:true,
	        start: "top 50%",
	        toggleActions:"play null reset reset",
	        onEnter: playVert

})

i'm sure there's a cleaner more efficient way to do this.. i have about 10 animations to add to this...

 

What do you think?

Link to comment
Share on other sites

There are a lot of ways to set it up. If all of your animations have that exact same format you can just make a function for it:

function playAnimOnScoll(options) {
  ScrollTrigger.create({
    trigger: options.trigger,
    markers: true,
    start: "top 50%",
    toggleActions: "play null reset reset",
    onEnter: function() { options.anim.play(); }
  });
}

// Usage
playAnimOnScoll({
  trigger: "#led-container",
  anim: ledAnim
});
playAnimOnScoll({
  trigger: "#vertical-container",
  anim: vertAnim
});

More about this in my article about animating efficiently.

 

I highly recommend spending time to better learn about JavaScript. It will save you lots of time in the end because then you won't have to wait to get a reply from others for as many things :) 

 

By the way, your duration in the ScrollTrigger doesn't make sense. Just use the start and end properties of the ScrollTrigger.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...