Laxxx.js - An Awesome Scroll Animation Library that's Only 2KB!

[@FMontanari709]

"Avoid transforms on large elements" and proceeds to rotate the huge box in the background 😂 Great tutorial! I will take a look at this library later, but seems really nice and smooth!

[@DesignCourse]

UPDATE: Laxxx.js was updated right after this video, and you need to add a class="lax" to the elements you want to animate. What do you use for your scroll-based animation needs? GSAP? Anime.js? Maybe Laxxx.js now? Let me know!

[@md.akib5124]

never emphasized on scroll based animation that much except smoothly scrolling. As far as can remember was only one anim where background image would gradually go blur based on scroll

[@huckfaters]

Backend developer here

[@balajijangde8470]

skrollr js and scroll magic

[@misterjaypeasmith]

Animate-on-scroll AOS has been good to me, but I can’t wait to try laxxx.js!

[@leobrsoulmaster]

very simple way to animate, gz for the video

[@faissalabsml4393]

Always sharing new and great content, thank you Gary.

[@FirstReducer]

Subscribed for the track at the end

[@sagarsivan3262]

Thank You....

[@raydavis6245]

The animation didn't work for me as per the code in this video with the latest version v1.2.2 of the library, it looks as though a change was made to the laxxx.js library where it now expects the element that is being animated to have class="lax" put on it, this then worked for me.

[@marylim2926]

Does anyone knows how to make it responsive? :/

[@ameerattaa2250]

hi bro do you know the of any library that is used to display 360 idegree image in angular ?

[@rakshitarenja7123]

going along with you was easy till the animations comes, then i copied your code from codepen and commented my codes then also animations were not working..

[@TheShouldersurfer]

It's possible you can use it in github page?

[@vickylance]

Can it be used on a React Project?

[@sarcasticdna]

Yeah you can

[@topscompilation7239]

@@sarcasticdna how?

[@TwstedTV]

its 3kb now LOL

[@R3TT1CH]

--save isn't necessary anymore as of npm version 5+. Packages get automatically added to the package.json file by now :)

[@FedericoGranata]

This is the comment I was looking for!!!

[@Hasnain1F]

@@FedericoGranata You could've simply visited the docs or read a blog post instead of looking for comments.

[@FedericoGranata]

@@Hasnain1F I know that the save option isn't required anymore. I was just looking for a comment stating so

[@mohamedshuaau632]

@@Hasnain1F I think you missed the point

[@cowtoystorybeer]

Could you please do a tutorial of the new lax.js 2.0? Thanks for all the great content!

[@JamesWelbes]

incredibly confusing. I add the same exact data attributes to three elements. It works perfectly on the 1st, does nothing to the other two. I add "data-lax-anchor="self"" to the two that aren't working, and then they almost work, except they do the exact opposite! They're supposed to fade in, and up, and they fade out, and down. I think they have a bit more work they need to do on this. Maybe their 2.0 Alpha will work better.

[@anistajioui3581]

Take my upvote

[@clydedsouza5843]

WARNING For all those who are watching this after Nov 2020. Lax 2.0 is a completely new script and overrides the old one, so it will no longer work. So you need to download this file - github.com/alexfoxy/lax.js/releases/tag/v1.2.5 and do it manually. Plus thank me and also help others by pressing the like button!

[@harshitpant3067]

github.com/alexfoxy/laxxx Repository URL if someone wants it. I can't seem to find that in the description

[@charith-q8m]

Bro's hair cut btw.. lol 😆😂 💕

[@titus7770]

Yo Gary I just followed the tutorial nothing worked for me. I've now followed the git and it seems it has been updated you need to add a class of lax now?

[@titus7770]

This is my current code and it works ghostbin.com/paste/g5wkj

[@Arttyor]

Why does it still feel like it lags, and I have GTX 1050 with hardware accelration turned on for browser?

[@Arttyor]

@@fjgaming8019 CSS 2D transforms use your CPU for rendering, but CSS3, use 3D transforms and use your GPU if allowed by browser (by default it's allowed)

[@primatondyaryakurniawan267]

Awesome stuff

[@vinny142]

Am I the only one who find it annoying how the poeple in the Javascript world are the only ones who keep naming their libraries after the first filename they started with? If you look at a Python library it's just called "furbyfurb", a C library is alled "smorgesborg", but in javascript it's always "doobiedoo js" or "snurfy js". Even entire frameworks do it; react.js , vue.js... why? Do javascript developers get confused if the extension is missing? Sure, it's similar to the utter stupidity of companies callingthemselves after their domain namens, whole ".com" bubble etc.. Are people really this stupid?

[@smurffronda2951]

thanks

[@elanges93]

Wow❤️❤️ amazing library, definitely gonna try this on my next project

[@AstroSirrus]

What if I just want the elements to animate in when scrolling the first time and then stay there? Does LAX.JS allow that function?

Awesome! Your videos always provide useful content & information. Thank you very much

[@byvtrx7766]

Can't you do the same thing with scroll spy in bootstrap? And since you probably want to use bootstrap anyway that would make this library completely unnecessary.

[@Faruk_Islamovic]

Now its 3kb xD

[@narendraverma825]

How can we use this with pseudo-class?

[@brucekoehler1154]

Hi Gary, could you possibly make a tutorial on horizontal page scrolling for a website? I saw the effect once awhile back and wanted to add it to a project.

[@MayurPatel3209]

Demo already on lax.js page. alexfox.dev/laxxx/sprite.html

[@ellier35]

@@MayurPatel3209 not found

[@eugenenovikov671]

year 2019, animation lib tut: VS Code is a free lightweight Microsoft ide....

[@franktielemans6624]

Awesome, reminds me of wow.js, but this one is better. because with this you can have different animations for different screensizes.

[@ZiafatAli]

Wohoohooooo!!! Finally something really simple and easy for parallax and animations. Excellent library. Thanks a lot for sharing.

[@MukeshKumaR-hz8nl]

So amusing... :D Learned something new and so quickly. It was so great. Thanks Gary :)

[@TheFayb]

Thanks again Gary but could you make a tutorial using laxxx or anime js with angular ?

[@koukiadem]

Nice Does anyone have angular package for this library

[@emanuel5247]

God bless you richly

[@InverserPro]

Thanks you!

[@techninja8049]

Nice vids!

[@SWGTBruno]

Notification Squad UNITE!!

[@brhh]

that's the saddest comment in here

[@yongzeyao1337]

Great library!!!!

[@sivahari97]

Awesome man...

[@AllenMarsam]

awesome

[@divyasampath9500]

Enjoyed this tutorial :) Though the latest update in the script is not working.

[@divyasampath9500]

@Fedi Bounouh Umm..I did...Maybe there is something else to fix in my code.

[@SudarshanSaxenatherockstar]

How can I use this in React JS?

[@MayurPatel3209]

This is great. You can always find the CDN on jsdelivr.com and it is pretty fast than most CDNs I have tested. It gets the library directly from npm and minifies the file pretty well.

[@Hellofriendzzz]

thanks for sharing this knowledge ! great content , keep up the good work

[@juancamilonarvaezsandoval7969]

Nice

[@esmhos]

thanks it's very helpful

[@zafariqbal92]

Amazing loved it thanks

[@wibudesu205]

0 dislike wow

[@octahedron646]

I normally use scrollreveal, that use animate.css with view factor, delay and duration options. But this is a great script ! Easy and light, perfect 👌 just wondering performance one mobile device. Thanks for sharing Edit: I figured out that scrollreveal is no more free for commercial usage.

[@alexfoxy]

I can't comment for lower power devices - but it's silky on my iPhone 6S :)

[@kmtreco2]

how to install in angular?

[@sajafFONiOS]

thank you MS DEV

[@ranggahananto6820]

@DesignCourse this is manthul!

[@codehow_]

Awesome!

[@ПётрИванович-ы3г]

Спасибо

[@baktohelp]

I authorized thanks

[@harshitharshit6448]

First Comment 😁

[@md.akib5124]

as awesome as you Gary.