Lottiefiles JavaScript Loop - Help Please

JavaScript
#1

So to begin,

I never learnt how to code and I’m a total newb to this. I started some courses on Freecodecamp but still, I’m no webdev lmao.
Here is a codepen :

I’m trying to use an animation from Lottiefiles and I want to add some interactions to it through JavaScript, but my JS lines are not working at all. Basically it should always loop from 0 to 20 frames, and then finish the loop animation when you click the object.

It could seem simple for someone, but this is just something simple I need to understand before going deeper into something else.

Thanks a lot to anyone responding (((:

#2

I don’t know the Lottie library, but what is the code to stop the loop?

#3

I don’t really know what to answer… As I said I don’t know many things about JS…

The codes you see in the code pen are the things I tried to workout with internet guides.
For the Html and css it seems clear there’s no problems. For the JS part what I understand is that I have to make a sort of wrapper and a script, and use the commands I wrote to make loops.

But that’s all I can say, I can probably direct you to the tutorials I’ve been going through, maybe you’ll understand better.

#4

as I said, I don’t know that library

how much experience do you have with JavaScript?

#5

As I said, none.

Lottie is a library working with bodymovin extension for After Effect. You can create an animation in AE, export it to .json in lottiefiles, and then use the animation you just created with html,css and js.

So basically, the animation is a .json file

#6

Here is the basic tutorial of adding a lottie animation in the browser :

https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page#:~:text=Add%20the,URL%20to%20your%20Lottie%20file.

Tutorial is quite simple and, you can see in the codepen that the html commands works fine.

Here are the tutorials for advanced JS animation which I try to follow with no success :slight_smile:

#7

And this one https://www.creativebloq.com/how-to/export-after-effects-animations-to-html5 (can’t put more than 2 links per post)

#8

Welcome there.

In general, we do not give out code as a solution here on the forum. This forum is to help campers learn web-related technologies through interaction with a helpful community.

So, it will be difficult to get you where you want to be, when you have little experience with JS.

That being said, you are quite far into getting there already. So, here is some help in the form of explaining the code:

// This element is a 'box' on the page
// It will likely not be found, because this code could run
//  before the HTML has been defined. CodePen is not the best
//  place to work with this.
var loader = document.getElementsByClassName("bodymovin");

// This is the data from the given path.
// I would assume this is being loaded (fetched) asynchronously (beware)
var animData = {
    container: loader,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path: 'https://gist.githubusercontent.com/DimiOui/ce230dde848a7bfe317efe65481b1440/raw/b989c887a87e3f66251c64eab3a3c656a0f401c9/Stream.json'
};

// This line does not make much sense, because 'bodymovin' has
// not been defined anywhere previously
var anim = bodymovin.loadAnimation(animData);

// When the animation is loaded run our firstLoop function 
anim.addEventListener('DOMLoaded',firstLoop);

// Create our playback functions
// -----------------------------

function firstLoop() {
     // play the first 20 segments (frames)
     anim.playSegments([0,20], true);
};
function secondLoop() {
     // play the second 20 segments
     anim.playSegments([20,40], true);
};


// Listen for a click event
// 'container' is not defined. So, there is nothing listening...
// perhaps, you should add an eventListener to 'animData.container'?
container.addEventListener('click', function(event) {
     anim.addEventListener('loopComplete', secondLoop);
});

Hope this helps

#9

@Sky020 I can’t thank you enough for the help you bring to me (((:

That beeing said :

// It will likely not be found, because this code could run
//  before the HTML has been defined. CodePen is not the best
//  place to work with this.
var loader = document.getElementsByClassName("bodymovin");

So what should I use to practice on this code ? Brackets or some software like this ?

// not been defined anywhere previously

I can see this is what codepen tells me, the problem is (with my current knowledge of JS) I can’t even tell how should I “define” my ‘bodymovin’ ‘box’.

Again, thanks a lot for your time.

#10

At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

Happy coding :slight_smile:

1 Like
#11

@ilenia

Already did the HTML and CSS courses, now working through the JS ones :smiley:

1 Like
#12

If you plan on sticking with web development/programming or similar, then I would suggest something like spending some time setting up Brackets or VS Code.

If you want to just get going with this project, then an online editor like CodeSandbox will give you the easiest, most feature-rich experience.

In general, you will need to learn:

  1. JS syntax
  2. How to debug JS
  3. How to link HTML, CSS, and JS (CodePen does this automatically for you, which lacks customizability/modularity). Specifically, it is important to know where/when to link each.
  4. Specific DOM methods (e.g. getElementById, getElementsByClassName, querySelector)

Do not expect to get all of this in one place (fCC), or on one day.

Happy coding :slight_smile:

#13