Motion One - A Lightweight JavaScript Animation Library

bit.ly/461S5HR 👈 Design & code like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're going to check out a JavaScript Animation library that released last year called Motion One: motion.dev -- It's similar to greensock, but way more light weight. Let's see what it can do!
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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

September 20, early access begins! designcourse.vom/af

[@beinyourguard]

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

[@Lakiman52]

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

[@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.

[@JamesJames-nv6ps]

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

[@Allformyequine]

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

[@pietraderdetective8953]

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

[@elisabattistoni7922]

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

[@remo6550]

That helps a lot! Thank u Gary🙌🏼

[@tuber694]

This was really good! More tutorials please.

[@toddmorey5492]

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.

[@erenyeager588]

Dude can you help me please. I'm trying to use this library but it is showing some error

[@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.

[@uxdworld]

Great learning, thanks

[@uchennaofoma4624]

thanks for this

[@muktadirrudro7552]

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

[@Alcaatraz01]

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

[@vegy4834]

more more more tutorials about Motion One!

[@abenjamin13]

Thank you 🙏 obviously me too.

[@omar4104]

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

[@aeapplabs]

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

[@glagraphy6533]

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

[@gro967]

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

[@gro967]

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

[@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?

[@rp2804]

why use transform:"none"

[@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.

[@ontheruntonowhere]

I think a relatively small file size is the main selling point here.

[@rafalpotasz]

@@ontheruntonowhere Ah, gotcha, cheers.

[@greendsnow]

it just lacks layout animations...

[@muktadirrudro7552]

Do they have any cdn link?

[@malcolmrodrigues911]

Check cdnjs?

[@muktadirrudro7552]

@@malcolmrodrigues911 yeah, but haven’t found any? Do you have any source?

[@malcolmrodrigues911]

@@muktadirrudro7552 I checked their github, looks like they havent made it available on any cdns afaik

[@UjjawalPandit-gw4ol]

Love from Bharat 🇮🇳 (India 😊)

[@seekknowledge1928]

I know India. But what is Bharat?

[@mr-skorpion]

@seekknowledge1928 Prime Minister's Modi's new rebranding of the nation since the opposition party set their name as I.N.D.I.A. and he and his right wing party dislikes that, lol

[@DarknessChronicles]

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

[@ontheruntonowhere]

Can you expand on that?