Super Lightweight Scroll Animations with Sal.js - 2.8kb!

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ธ.ค. 2024

ความคิดเห็น • 131

  • @DesignCourse
    @DesignCourse  6 ปีที่แล้ว +15

    Make sure to sub! My answer for today's ? These days, I'd say about 80% of my time on the PC is working between finding topics to cover, learning, building out the projects and actual recording. Prior to 5 years ago, I spent too much damn time gaming. No more!

    • @manishsharma1298
      @manishsharma1298 6 ปีที่แล้ว

      About 80% .... Rest 20% gaming and other stuffs....

    • @mgjulesdev
      @mgjulesdev 6 ปีที่แล้ว

      Same except 3 years ago. Now mostly work and research.

    • @SunsetRacer
      @SunsetRacer 6 ปีที่แล้ว +1

      Hey Garry, i love you man (no homo) and i wish you do great in getting more subscribers i will make sure to spread the love of this great channel. and nice tutorial as always :D/
      PS: i approx use the 50% work 50% learning ratio and 0,1% gaming

    • @TheBeater0
      @TheBeater0 6 ปีที่แล้ว +2

      8h per day on work :D next 4h at gaming... so its 75% ... Damn i dont have private life :(

    • @CoderSprint
      @CoderSprint 6 ปีที่แล้ว

      You didnot share swipe.svg .. github??

  • @rodrigonormando7371
    @rodrigonormando7371 6 ปีที่แล้ว +8

    This is absolutely just what I had in mind for a project I'm working on! I've been learning a lot from your videos! Thanks!

  • @ravirathor518
    @ravirathor518 6 ปีที่แล้ว

    80% work & 20% only your videos except sunday. Loved the way you teach us.. Thank you sir

  • @noeljose
    @noeljose 5 ปีที่แล้ว +4

    30% work
    30% learn to code
    20% Music
    10% Designing
    05% Making comics
    05% Staring at the wallpaper

  • @jesusblanco3866
    @jesusblanco3866 6 ปีที่แล้ว

    Gary, I just want to thank you for all these amazing tutorials! really cool stuff

  • @sveinsoermo9883
    @sveinsoermo9883 6 ปีที่แล้ว +3

    80% work, 20 % learning. Only recreation on my Ipad when I go to bed LATE.

  • @creativeaf09
    @creativeaf09 6 ปีที่แล้ว

    Your videos are always so great! You cracked me up when you were like what's going on!? That's my life about 70% of the time haha

  • @Emily_Entropy
    @Emily_Entropy 5 ปีที่แล้ว +1

    Man this whole time I thought you were a mormon or something, trying to be Mr. Clean. Then I saw you lose your shit in this video. LOL!

  • @bendyamin86
    @bendyamin86 6 ปีที่แล้ว +17

    data-sel-easing
    data-sel-easing
    data-sel-easing

  • @salaheddinlamnayra7439
    @salaheddinlamnayra7439 5 ปีที่แล้ว +1

    hey DesignCours can you just stop to fascinate me
    thank you for your awesome video

  • @evgeniyperekhod9278
    @evgeniyperekhod9278 6 ปีที่แล้ว +2

    Thank you for the tutorial) Amazing!
    My PC works usually about 10-12 hours, I know that's a lot)

  • @Xfacta12482
    @Xfacta12482 6 ปีที่แล้ว +1

    Im curious if this is just using requestAnimationFrame(). Just recently implemented my own version of this on our production site where I work.

  • @creativeaf09
    @creativeaf09 6 ปีที่แล้ว

    Actually I have a question after trying to implement it. I imported Sal.js into my Angular 5 app and I can see that the css is being applied but all the webkit properties are being overridden. Since with sal.js I'd be adding their style attributes to the elements directly and not writing my own css, I'm not seeing how I can control the specificity in this situation. I've tried referencing the css file in @Component.styles, @component.styleUrls and a couple other places to no avail. Any ideas on how to give desired css files higher specificity than what Angular is doing? Thanks!!

  • @alexjimborean6160
    @alexjimborean6160 6 ปีที่แล้ว

    What advice would you give to designers on breaking through the amateur to professional design barrier?

  • @ChirutacDumitru
    @ChirutacDumitru 6 ปีที่แล้ว

    Exist a way to integrate this library in a angular 5 project ? if yes, can you share some examples . Thanks

  • @jade-og1ef
    @jade-og1ef 5 ปีที่แล้ว

    do we need to install something else first aside from node.js? ive installed node js and repeated this tutorial for couple times but still failed. thanks!

  • @SimonHallMelbs
    @SimonHallMelbs 6 ปีที่แล้ว

    Hey Gary, how would I go about integrating this into Drupal 8 ?

  • @bafriesen
    @bafriesen 6 ปีที่แล้ว

    Gary, I'm trying to get sal.js and it's dependencies installed to my website (hosted on a remote server). Coda 3 currently doesn't offer command line access to connect to the server and Visual Studio Code won't let me connect to my server with their ftp-simple command, a lot of others online have had issues too when I troubleshot. I'm stuck as to how to get sal installed to a remote server. Can you help? Thanks

    • @bafriesen
      @bafriesen 6 ปีที่แล้ว

      Nevermind I got it working. Follow up question though. Can you add multiple animation types to a single element, similar to the same way you can add various class names to an element? For instance if I wanted an img to slide-up and fade at the same time can I use data-sal="slide-up fade" in my element attribute?

  • @flatmonk3y
    @flatmonk3y 6 ปีที่แล้ว

    90% of the time its work. Great video you are the greatest!

  • @shivanshsrivastava9279
    @shivanshsrivastava9279 5 ปีที่แล้ว

    How to use sal with cdn without using npm package?

  • @TheBestTechComparison
    @TheBestTechComparison 6 ปีที่แล้ว

    One question for you guys: I have integrated sal.js and barba.js (for page transitions) on my website. But when you go from home page to another page and come back to home page again, the sal.js animations don't work. How to solve the issue? Thank you

  • @WebBrosUnltd
    @WebBrosUnltd 6 ปีที่แล้ว

    Hi, love the videos you make. i was just wondering what is the extension called you use to auto complete your index.html ! + Enter (Emmet Abbreviation). Please can you tell me the name or a link. Thanks so much and keep on making these awesome videos i am learning so much more being a front end developer.

    • @martylouis
      @martylouis 6 ปีที่แล้ว

      It comes built in with VS Code

    • @WebBrosUnltd
      @WebBrosUnltd 6 ปีที่แล้ว

      @@martylouis LOL thanks i tried it before saving as html :P

  • @outis99
    @outis99 4 ปีที่แล้ว

    Tried Sal.js because AOS had a bug with slide-left but guess what, Sal.js has the EXACT same bug, it just adds a bunch of whitespace on the top side of it's parent element, in my case my anybody know how to fix this?

  • @adilismail3593
    @adilismail3593 5 ปีที่แล้ว

    what does &:n-th-of-type do?

  • @sofistoyanova7121
    @sofistoyanova7121 6 ปีที่แล้ว

    when i upload it to the server is not working, and it is blocking the elements

  • @vakyz5333
    @vakyz5333 5 ปีที่แล้ว

    When i try to use it in github. i having a problem.
    unable to load the resources all node sal files

  • @armstrongsama278
    @armstrongsama278 6 ปีที่แล้ว

    thanks a lot . can you make a video and how to make parallax animations

  • @samuelkahunga5987
    @samuelkahunga5987 4 ปีที่แล้ว

    how do you use this in django

  • @balthzarofate1342
    @balthzarofate1342 6 ปีที่แล้ว

    Working and learning, motivational videos les brown 😉 that's all I do most of the time. Gaming not so much but I was a hardcore gamers few years ago.

  • @elechandroxxx23
    @elechandroxxx23 5 ปีที่แล้ว

    Hi, can i use it with Angular project?

  • @vijayanira
    @vijayanira 6 ปีที่แล้ว

    Is it better to animate.css ?

  • @simongilsotto8533
    @simongilsotto8533 4 ปีที่แล้ว

    Can i do this using notepad?

  • @EcuaBlackOps212
    @EcuaBlackOps212 5 ปีที่แล้ว

    the animation doesn't work for me. It says "sal is not defined"

  • @janseniogonzalesvenegas2649
    @janseniogonzalesvenegas2649 5 ปีที่แล้ว

    me funciona perfectamente en firefox , en chrome no hace el desplazamiento y sale error en consola
    en inspercionar codigo:
    Access to script at 'file:///C:/Users/Jans/Documents/sal.js/smooth-scroll-tutorial-master/node_modules/jump.js/dist/jump.module.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    Alguna solucion!!!

  • @mh5854
    @mh5854 2 ปีที่แล้ว

    65% work, 20% songs, 15% random videos on youtube

  • @mayur9876
    @mayur9876 6 ปีที่แล้ว

    Exactly what I was looking for. Thank you so much.

  • @nukeZ3r0
    @nukeZ3r0 6 ปีที่แล้ว

    HelloSign seemed like the perfect solution to what I was looking for to build into my wife's website, however; the pricing model is not small-business friendly whatsoever. Something more along the lines of $1/signature a-la-carte (better deal for bulk) would be where I think this should be priced.

  • @TheBestTechComparison
    @TheBestTechComparison 6 ปีที่แล้ว

    Thanks for the tutorial. I wonder if sal.js can be use with WordPress.

  • @lukor-tech
    @lukor-tech 6 ปีที่แล้ว

    About 80% of the time it's working.
    Either it's my day to day work or a freelance project.

  • @nadimshakya3361
    @nadimshakya3361 6 ปีที่แล้ว

    Does this work with 'reactjs' ?

  • @СергейПротос-р1р
    @СергейПротос-р1р 6 ปีที่แล้ว

    Thx bro. Hi from Russia!

  • @sakib613
    @sakib613 6 ปีที่แล้ว

    Such a nice tutorials..keep up the good work..

  • @chriscarton4728
    @chriscarton4728 5 ปีที่แล้ว

    Why is LA CAF always demande to changer le mot de passe tous les trois mois ?!

  • @sivuyilemagutywa5286
    @sivuyilemagutywa5286 6 ปีที่แล้ว

    30% work, 50% Learning, 20% other staff

  • @sykowhite9465
    @sykowhite9465 6 ปีที่แล้ว

    is it same as wow.js or is it somehow better?

  • @natqe4049
    @natqe4049 6 ปีที่แล้ว +2

    why not animate.css?

    •  6 ปีที่แล้ว +2

      coz its not 2.8kb

    • @Take-the-Ticket
      @Take-the-Ticket 6 ปีที่แล้ว

      Also, this gives a lot more flexibility with animation delays. You have a nearly infinite amount of values with this, with animate.css it only has a few if any...I forget what it has for delays...

    • @natqe4049
      @natqe4049 6 ปีที่แล้ว

      I'm using this one - github.com/natqe/animate.scss

  • @1balwant
    @1balwant 6 ปีที่แล้ว

    Nice! Keep posting.

  • @antoniomartinez3429
    @antoniomartinez3429 5 ปีที่แล้ว

    it was so helpful! thank you so much!

  • @Азизбек-и4м
    @Азизбек-и4м 6 ปีที่แล้ว

    Amazing tutorial

  • @jojo_Ca
    @jojo_Ca 6 ปีที่แล้ว

    30% work 20% watching youtube 50% cursing at my uncooperative code. lol

  • @KeijiAkuma
    @KeijiAkuma 5 ปีที่แล้ว

    doesnt work with bootstrap-float

  • @brampeirsful
    @brampeirsful 6 ปีที่แล้ว

    You deserve more likes ;)

  • @patotegonzalez
    @patotegonzalez 6 ปีที่แล้ว

    is great this script but give me problems in safari =/ doesnt work =(

    • @klauskloss3755
      @klauskloss3755 6 ปีที่แล้ว

      Patricio Gonzalez You have to use a Polyfill.

  • @therishabhraj
    @therishabhraj 6 ปีที่แล้ว +1

    "data-sel-easing", I think that's incorrect. Although it worked fine.

  • @devtube734
    @devtube734 6 ปีที่แล้ว

    Using computer for about 16h in a day. Working around 6 to 8 hours and remaining hours do random stuff like social networking, reading random article, watching youtube like cat video. Felling sad end of day since i have wasted today. Can't go out from this chain. Watching self improvement video on TH-cam, nothing seems work for me. Feeling worried about career like whether i should go with web Carrier or generic other carrier. Always thinking how to be more productive at the end find out another day wasted. How much time do you work?

    • @Gigusx
      @Gigusx 6 ปีที่แล้ว

      So stop thinking and start doing things.

  • @plugnation7503
    @plugnation7503 6 ปีที่แล้ว

    20% work and 80% researching

  • @hamzaattiq8187
    @hamzaattiq8187 6 ปีที่แล้ว

    data-sal-delay is not working

    • @hamzaattiq8187
      @hamzaattiq8187 6 ปีที่แล้ว

      Anyone else is facing this issue ?

  • @edisvelicanin8854
    @edisvelicanin8854 6 ปีที่แล้ว

    Nice scroll script.
    About 65-70 % is work.

  • @dragonbreak3360
    @dragonbreak3360 4 ปีที่แล้ว

    I just can't understand why is everybody just providing an npm insalls and no traditional downloads...

  • @Deliverant
    @Deliverant 6 ปีที่แล้ว

    60% work 40% gaming/watching movies

  • @nourhfissi2804
    @nourhfissi2804 6 ปีที่แล้ว

    Thank you sir!

  • @oldrafiki7365
    @oldrafiki7365 6 ปีที่แล้ว

    20% work 60% gaming 20% surfing

  • @dragonbreak3360
    @dragonbreak3360 6 ปีที่แล้ว

    What if I don't wanna use those stupid scss files?

    • @MrQuiksilva91
      @MrQuiksilva91 6 ปีที่แล้ว

      Dragonbreak then use normal css. But would definitely advise you to switch to scss or some other css preprocessor sooner rather than later.

    • @dragonbreak3360
      @dragonbreak3360 6 ปีที่แล้ว

      I don't see any advices... Can you please explain me why should i use a preprocessor when i can do everything in regular css?

    • @ashadnasim8103
      @ashadnasim8103 5 ปีที่แล้ว

      @@dragonbreak3360 sass is amazing brother

    • @dragonbreak3360
      @dragonbreak3360 5 ปีที่แล้ว

      @@ashadnasim8103 It's nothing more than CSS but in a diffrent form... And that's why it is not...

    • @MrNiraj43
      @MrNiraj43 5 ปีที่แล้ว

      @@dragonbreak3360 it will make easier to manage large projects.

  • @Rosko_de_Soul
    @Rosko_de_Soul 4 ปีที่แล้ว

    Thank You...

  • @programminggod4716
    @programminggod4716 6 ปีที่แล้ว +7

    40% is work rest are all thug life videos...

  • @remkospaans
    @remkospaans 6 ปีที่แล้ว

    80% work, 15% Hobby, 5% other

  • @AllenMarsam
    @AllenMarsam 6 ปีที่แล้ว

    thanks

  • @juanluisclaure6485
    @juanluisclaure6485 6 ปีที่แล้ว

    in work and funny typing I think is 70/30 like moving to 80/20

  • @nomtijorti
    @nomtijorti 6 ปีที่แล้ว

    About 90% is work on the weekdays, but on weekends about 40%; the rest is Netflix and League.

  • @chagamajaykumarreddy1897
    @chagamajaykumarreddy1897 6 ปีที่แล้ว

    Daily 14 hours which include 11 hours work and 3 hours learning

  • @diegognoatto590
    @diegognoatto590 6 ปีที่แล้ว

    40%youtube/courses/hitting head against the wall trying to make things work, 30%work, 30%gaming

  • @bachana1231
    @bachana1231 5 ปีที่แล้ว +1

    Mo-fr - 8h Working 2h playing,
    S-S - 14h playing 😂😂

  • @GabrielSantos-nx3zq
    @GabrielSantos-nx3zq 6 ปีที่แล้ว

    This is included in WoW.js

  • @sykowhite9465
    @sykowhite9465 6 ปีที่แล้ว

    luv this !

  • @faridhamzayev8082
    @faridhamzayev8082 6 ปีที่แล้ว +2

    Aos js

  • @TechnoTrace
    @TechnoTrace 6 ปีที่แล้ว

    about 45% by the time I'm watching this..I know it's kinda useless for a developer but I'll be improving it...

  • @ihelpdogs
    @ihelpdogs 2 ปีที่แล้ว

    holy a little warning maybe before you switch from your dark theme editor to a glaring white web page. But hey who needs working eyeballs anyway right?

  • @tzovinar9188
    @tzovinar9188 5 ปีที่แล้ว

    on weekdays, 80% work and 20% tv shows / animes / movies / mangas
    on weekends id say... 90% tv shows / animes / movies / mangas and 10% just scrolling on tumblr 😂😂

  • @epifandryvsesvyatov4097
    @epifandryvsesvyatov4097 6 ปีที่แล้ว

    Haha, at first minute you looks like "Big hands - kid's face" :) May be of t-shirt color

  • @rohitsagar9011
    @rohitsagar9011 6 ปีที่แล้ว

    30 %gaming and in 70% Chrome , code editor and some music

  • @migueltejada619
    @migueltejada619 6 ปีที่แล้ว

    40% of the time, I work all the time

  • @alphalyrics106
    @alphalyrics106 6 ปีที่แล้ว

    Almost 60% for working

  • @ankitsinghchandravat7404
    @ankitsinghchandravat7404 6 ปีที่แล้ว

    I work 5/6 hours but work is only 40% other is gaming

  • @TechnicalMH180
    @TechnicalMH180 6 ปีที่แล้ว

    Wau amazing

  • @MaxWeir
    @MaxWeir 6 ปีที่แล้ว

    What the F am I doing? That made my day 🤣

  • @emiliostefano
    @emiliostefano 6 ปีที่แล้ว

    60% learn 40% work

  • @lastestsongs3958
    @lastestsongs3958 6 ปีที่แล้ว

    fitty Mohhhhh

  • @simpleprogramming4671
    @simpleprogramming4671 5 ปีที่แล้ว

    98%work :)

  • @johnjohnson4484
    @johnjohnson4484 5 ปีที่แล้ว

    man id say about 80%. 100% is supposed to be work time, but i het distracted pretty easily.

  • @golakjena
    @golakjena 6 ปีที่แล้ว

    30%

  • @CoderSprint
    @CoderSprint 6 ปีที่แล้ว

    99% myTime on Laptop goes in coding/learning

  • @franktielemans6624
    @franktielemans6624 6 ปีที่แล้ว

    looks like wow.js, but a bit easier

  • @RodrigoDiasS
    @RodrigoDiasS 6 ปีที่แล้ว

    50%/60%

  • @gknt694
    @gknt694 6 ปีที่แล้ว

    it may be really cool when it is used with splitting.js Just an idea. I have not used both :D

  • @its_r4y
    @its_r4y 6 ปีที่แล้ว

    40% goddamn 😣😣

  • @mahdialikhani9371
    @mahdialikhani9371 4 ปีที่แล้ว

    Sadly 40%

  • @martink8
    @martink8 6 ปีที่แล้ว

    30% work 30%learn 40%crap :)

  • @sethi4204
    @sethi4204 6 ปีที่แล้ว

    10% some times mostly 0% 😂😂

  • @suranjithnishalaka7395
    @suranjithnishalaka7395 6 ปีที่แล้ว

    20 h coding ;-)

  • @nepalcodetv6298
    @nepalcodetv6298 6 ปีที่แล้ว

    I know you just copy from another window heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee heeeeeeeeeeeeeeeeeeeeeeeeeeee