Motion One - A Lightweight JavaScript Animation Library

0:00 - Intro
0:32 - Project Setup
2:36 - HTML
4:15 - CSS
6:27 - Simple Animations
10:40 - Scroll Animations

Let's get started!

#javascript #animation #frontend

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[Lakiman]

I actually asked about this exact thing on your community post yesterday! 😊

I'd love to see more tutorials of this library, GSAP was always quite heavy so this would be a great alternative

[elisabattistoni]

Hi Gary! Yes, more tutorials on this library would be awesome! Thanks

[muktadirrudro]

I was searching for some tutorial on this. Haven’t found anything good. Would love to see some more explanation videos

[Take-the-Ticket]

I would like to see more of this. It would be cool if they had a function like AOS.JS where you specify the activations with anchor placements.

[pietraderdetective]

I would absolutely love to see more videos on this motion one library.

[justinasbei]

Thanks for tutorial. Just one thing... 14:56 you don't need commas there because what you call "chaining" is actually series of commands and { } is not an object in this case, but a function wrapper. Instead of comma in JS semi-column could be used or just new line.

[Allformyequine]

Yes! Interested in seeing more please and thank you!! Seems more simple and straightforward? Luv that it's more lightweight too :) !

[JamesJames-nvps]

Will be lovely to see a full tutorial, well done 👏

[tuber]

This was really good! More tutorials please.

[Alcaatraz]

Gary clapping back lmao. I hope we see more covering this if you're up for it.

[beinyourguard]

this library seems amazing, gary. please do a full tutorial about it, would love to see it

[omar]

would love to see more tutorials about this library. there isn't much out there.

[glagraphy]

can you make a video integrating this into code overrides in framer?

[gro]

It’s 2023, finally time to switch to pnpm or bun ;)

[DarknessChronicles]

I was about to switch to this library but then i learned there is no onUpdate method.

[toddmorey]

Been using this library and love it. A tutorial on how to move a shape along a path would be awesome. I can’t figure that out.

[rafalpotasz]

Question: Why would I use this over GSAP (something i already like and use)? Does anyone have any big 'wins' from using this library, in comparison to GSAP?

This basic example makes me wonder why I would use this over GSAP, looks pretty similar and i wonder if anything is improved or it's just another option on the table.

[aeapplabs]

Looks cool, would like to learn more. I thought greensock was the best way to do animations especially scroll based.

[ibbatta]

I am not a big fan of import scripts in the head of the project, why you do that? Did you found any benefits?

[gro]

In the meantime people already dropped motion one again for the newer more native html and css options that are coming up 😅