Todo list: How can I make the animation smoother?

[revesdemarie]

Started learning JavaScript this week and here’s my first JavaScript project. Took me two full days to make it. I mainly followed Dev Ed’s Tutorial but had to figure out the edit / save functionalities on my own through trial and error and a bit of help from Google.

Let me know where I could improve. Specifically, if you have tips for smoother animation, that would be great as well. When I delete a task, the others just abruptly move and the transition doesn’t seem to work.

[tomas2387]

Just tested it deleting the first element, and I think is very good from a performance perspective.

This image depicts that whenever an element it’s deleted, no JavaScript it’s executed, just a little garbage collection from the removed DOM element, but that’s it.
From a user experience perspective, I can’t say much, as I’m not an expert. Is the abrupt movement a bad experience for the user? Maybe. But perhaps, if we add an animation to smooth those abrupt movements, it will bring performance problems.

The issues with animations normally begin when you use JavaScript to trigger and manage them. That’s because only one CPU thread will be doing the task of animating a DOM element, when it should be the GPU doing it. So whenever you can, animations should be done with pure CSS, triggered by Javascript toggling a class.

I would like to point out that the addEventListeners you added here are a very smart way to solve future memory leaks and useless memory usage. You only create one event listener for all the inputs that may be created, and then you choose if you want to manage or not the event. This is the very good. The common solution is to add the event listeners to each element created dynamically. That often comes with the perils of memory leaks when you delete those dynamically created elements. Very good.

However, I would like to suggest using the template element to really separate responsibilities.

: The Content Template element - HTML: HyperText Markup Language | MDN

It is good practice to avoid Javascript having the HTML creation and renderization of HTML elements. Better to keep that to the HTML.

Apart from that, overall I think you’ve done a superb job.

[revesdemarie]

Thank you for taking the time to check out the code and write feedback!

I think that the abrupt movement rather than easing into position kind of makes the project a bit janky, at least in my opinion so I still want to work on it but will consider possible issues.

Also, to be honest, I haven’t really thought of how anything (animation, addEventListeners, and template element) would affect performance or memory issues (I guess I’m still at the visual part of coding). But thank you for bringing them to my attention and I’ll definitely read about them.

Again, thank you!