Scroll Trigger Tutorial - 1 - Getting Started

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

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

  • @TheCodeCreative
    @TheCodeCreative  2 ปีที่แล้ว +4

    🎓 New Course Available! "Scrollytelling 101": store.thecodecreative.com/scrollytelling

  • @paulaabramovich3465
    @paulaabramovich3465 2 ปีที่แล้ว +15

    i cant explain THE HAPPINESS i felt the moment i started understanding this. You are allowing me to make my final project SO MUCH BETTER! THANK YOU!

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

    If only all tuts could be this clear, concise and well put together. Thanks!

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

    In 2023 it is still best GSAP tutorial! Thank you

  • @chibuzorisrael5878
    @chibuzorisrael5878 11 วันที่ผ่านมา +1

    Thank you so much. I was exhausted trying to get this right.

  • @ЕвгенийЧикишев-с7б
    @ЕвгенийЧикишев-с7б 25 วันที่ผ่านมา +1

    Спасибо большое за подробное и понятное объяснение! Это определённо заслуживает лайка)

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

    Thanks a thousand times for this tutorial.
    I want to point out the importance of the UPPERCASE when need it. I was going to ask for your help because the square2 wasn't triggering the animation of square and then I realized that I wasn't using the capital P in gsap.registerPlugin.
    Now works like a treat! Great!!!

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

    Amazing tutorial, clearly explained, well paced. The best explanation of ScrollTrigger on TH-cam or any where else - and oh, how I have been searching! Thank you so very much! I did a happy dance after getting this to work.😃

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

      Glad you liked it! If you're interested in this topic, please check out the full course as well 😀 store.thecodecreative.com/scrollytelling

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

      ​@@TheCodeCreative I purchased your course. I know a good teacher when I see one! Just got started and really looking forward to going through it. 😉

    • @TheCodeCreative
      @TheCodeCreative  ปีที่แล้ว

      @@LeatherClass That's great! Thanks and enjoy!

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

    You're good! I mean you are really good.
    Great delivery and explanation, so rare in YT videos it doesn't go unnoticed.

    • @TheCodeCreative
      @TheCodeCreative  2 ปีที่แล้ว +1

      Thanks so much and thanks for watching 👍🏻

  • @pyaephyohein7409
    @pyaephyohein7409 4 ปีที่แล้ว +6

    Been looking for such tutorials. Highly appreciated it man :)))) and hope you get more subscribers in near future.

    • @TheCodeCreative
      @TheCodeCreative  4 ปีที่แล้ว +2

      Thanks for the comment and thanks for watching!

  • @abbasladan6018
    @abbasladan6018 6 หลายเดือนก่อน +1

    Working fine lfggg I have watched alot of JavaScript animation tutorials all tutors have different ways of doing thinks and I can't learn all but this solves all the problem and sometimes the other tutor codes don't work you're the best man 💯

    • @TheCodeCreative
      @TheCodeCreative  6 หลายเดือนก่อน

      Glad I could help!

    • @abbasladan6018
      @abbasladan6018 6 หลายเดือนก่อน

      @@TheCodeCreative sir do you have videos or can you create one on split text animation the gsap library own is paid I can't seem to find anyone that works

  • @IsaacFifth
    @IsaacFifth 2 ปีที่แล้ว +3

    Love the way you explain in your videos, thank you so much 🙌

  • @milosleng1175
    @milosleng1175 3 ปีที่แล้ว +5

    Thanks, this plugin is amazing! + your lovely style of explaining things, very slow and calm voice (never boring me though!). 10/10. got a new subscriber!

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

    Thanks for making this video! I have been searching for a comprehensive series about scroll trigger and looks like I found it. Looking forward to watching the rest! :)

    • @TheCodeCreative
      @TheCodeCreative  4 ปีที่แล้ว +1

      Thanks for watching Sean. More coming soon 👍🏻

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

    You are very good teacher! I like how you go from the SIMPLEST to more complex ✌

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

    How do i combine scrolltrigger with timeline? scrolltrigger that triggers a timeline with couple of animations that happen one after another?

    • @TheCodeCreative
      @TheCodeCreative  ปีที่แล้ว

      Hi Constantine, here's a video about ScrollTrigger with timelines: th-cam.com/video/-qQhTxTtpeQ/w-d-xo.html

  • @nardo988
    @nardo988 3 ปีที่แล้ว +2

    лучшие уроки по библиотеки GSAP. Автору спасибо из России. Thanks a lot!

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

    It's really helpful and informative tutorial sir.
    Thank you

  • @kdramagirl122
    @kdramagirl122 8 หลายเดือนก่อน +1

    I understood it really too well thank you so much

  • @БелыйОрел-и6ю
    @БелыйОрел-и6ю 5 หลายเดือนก่อน +1

    Hello. What theme are you using in VS Code?

    • @TheCodeCreative
      @TheCodeCreative  5 หลายเดือนก่อน

      Hi! It's called "Shades of Purple"

    • @БелыйОрел-и6ю
      @БелыйОрел-и6ю 5 หลายเดือนก่อน +1

      @@TheCodeCreative Thank you. Now I have become +1 level cooler!

    • @TheCodeCreative
      @TheCodeCreative  5 หลายเดือนก่อน

      @@БелыйОрел-и6ю 😄

  • @Ozla102
    @Ozla102 2 ปีที่แล้ว +1

    It’s extremely useful, loving it!!!

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

    that's what I'm looking for 🙏

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

    Which is the vs code theme please comment

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

    1:03 Can make tut on this where that image is sliding from left and its starting point is outside the div

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

    Hello, i wanted to buy the scrollytelling in ur website but its closed, cant buy it

    • @TheCodeCreative
      @TheCodeCreative  6 หลายเดือนก่อน

      Hi Diego, sorry for the delay! The course is open now. Cheers!

  • @jitendrakumarsingh1137
    @jitendrakumarsingh1137 3 ปีที่แล้ว +1

    Man you rock. Thanks for the awesome tutorial.

  • @anyone915
    @anyone915 2 ปีที่แล้ว +1

    its not working for me ,animation is happing but the scroll trigger is not working and the console log is showing this ( Invalid property ScrollTrigger set to .square Missing plugin? gsap.registerPlugin() )..... what should I do?

    • @TheCodeCreative
      @TheCodeCreative  2 ปีที่แล้ว +1

      Check things like capitalization, your script tags, ordering of your script tags...

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

      @@TheCodeCreative thank you I found the solution the error was that ( s ) has to be small in ( scrollTrigger )

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

      @@anyone915 Great!

  • @vijithuae
    @vijithuae 4 ปีที่แล้ว +2

    Thank you ... for making this video...

  • @ФедорСергеевич-ю2ь
    @ФедорСергеевич-ю2ь 4 ปีที่แล้ว +2

    Thanks you from Russia!

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

    You are my hero! Thanks a lot!

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

    Thank you very much. Very useful content👍

  • @duckstudioTH
    @duckstudioTH 3 ปีที่แล้ว +1

    Hi, I'm from Thailand. I got the problem when I used "gsap.registerPlugin(ScrollTrigger);" in my JS file. Nothing is working.
    Uncaught SyntaxError: Unexpected token 'export' (ScrollTrigger.js:472 )
    app.js:1 Uncaught ReferenceError: ScrollTrigger is not defined at app.js:1

    • @duckstudioTH
      @duckstudioTH 3 ปีที่แล้ว +1

      gsap.min.js:10 Invalid property ScrollTrigger set to .square2 Missing plugin? gsap.registerPlugin().
      I followed you every step but still can't find out why.

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว

      @@duckstudioTH Do you have the correct script tags in your HTML file for both the gsap core library as well as the scrolltrigger plugin?

    • @duckstudioTH
      @duckstudioTH 3 ปีที่แล้ว

      ​@@TheCodeCreative I copied it from their website directly. I also changed it to ver.3.5.1 but it still didn't work.

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว

      @@duckstudioTH If you create a codepen with your code I'll take a look.

    • @duckstudioTH
      @duckstudioTH 3 ปีที่แล้ว +1

      @@TheCodeCreative thx but I don't know why. It's just magically working right now since I began to do it again. Maybe the UPPERCASE of "ScrollTrigger" do the tricks.

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

    this was awesome thanks a lot

  • @mr.anderson8987
    @mr.anderson8987 3 ปีที่แล้ว +2

    Great video thanks very much. Though I didn't like the occult symbolism in the first 'wow' frame. I'm not suggesting it is deliberate or that you are aware of it though. 👍

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว +1

      Some see a woman doing Peekaboo 🤣 Thanks for watching!

    • @amaraci
      @amaraci 3 ปีที่แล้ว +2

      Most certainly did not like it either, but I am happy I decided to stay, despite. What vscode theme are you using, Greg? Thanks for the vids!

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว

      @@amaraci You're welcome! The theme is called "Shades of Purple".

  • @azroph968
    @azroph968 3 ปีที่แล้ว +1

    Wow thanks this is perfect !

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

    Thank!!! Im new subscriber.

  • @oasis4everever
    @oasis4everever 4 ปีที่แล้ว +1

    Thanks for the tutorial!

  • @lostinthenarrativve
    @lostinthenarrativve 6 หลายเดือนก่อน +1

    can I follow along with React?

    • @TheCodeCreative
      @TheCodeCreative  6 หลายเดือนก่อน

      Yes, I think this might help: th-cam.com/video/_hbvq1TuZs8/w-d-xo.html

    • @lostinthenarrativve
      @lostinthenarrativve 6 หลายเดือนก่อน +1

      @@TheCodeCreative Thanks boss.

  • @baotruong5775
    @baotruong5775 2 ปีที่แล้ว +1

    Thank you so much!

  • @jullienmclean4044
    @jullienmclean4044 3 ปีที่แล้ว +1

    You are the MAN STAN

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว +1

      ha! Thanks for watching!

    • @jullienmclean4044
      @jullienmclean4044 3 ปีที่แล้ว +1

      @@TheCodeCreative I just wanted to thank you again for the video. You helped me create all of the scrolling transition/animations on this website tessX.net

    • @jullienmclean4044
      @jullienmclean4044 3 ปีที่แล้ว +1

      @@TheCodeCreative wouldn’t been able to do it without your help 🙏🏽

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว

      @@jullienmclean4044 Thank you, that's great to hear! 👍🏻

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

    very nice

  • @arthurradium5823
    @arthurradium5823 4 ปีที่แล้ว +2

    really cool video !!! thx

  • @iuashrafi
    @iuashrafi ปีที่แล้ว

    only my ScrollTrigger does not works(sometimes it works ,most of the times it doesn't) its quite frustrating

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

    👓 Blog Article for this video: www.thecodecreative.com/blog/scrolltrigger-getting-started

  • @andrewananenko797
    @andrewananenko797 3 ปีที่แล้ว +1

    Awesome

  • @leniyuva3290
    @leniyuva3290 3 ปีที่แล้ว +1

    Спасибо за видео, только благодоря ему я нашла ошибку, почему мой триггер не работал. А дело оказалось в версии! На оф сайте в разделе installation CDN стоит версия 3.1.1 , а на видео у него версия 3.5.1 ! И о чудо, оно заработало!

  • @TheCodeCreative
    @TheCodeCreative  3 ปีที่แล้ว

    Join "The Code Creative Community" group on Facebook: facebook.com/groups/thecodecreative

  • @TheCodeCreative
    @TheCodeCreative  3 ปีที่แล้ว

    Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
    store.thecodecreative.com/google-secrets-cheat-sheet

  • @mohammedfaris5326
    @mohammedfaris5326 3 ปีที่แล้ว +1

    Make 3js WebGL tutorials

  • @danieleesposito5488
    @danieleesposito5488 ปีที่แล้ว

    copiando il codice uguale,lo scroll funziona sempre ugualmente

  • @TheCodeCreative
    @TheCodeCreative  4 ปีที่แล้ว +1

    To subscribe to the channel: th-cam.com/channels/mOpHGj4JRWCdXhllVTZCVw.html

  • @shanlenardtolentino
    @shanlenardtolentino 2 ปีที่แล้ว +1

  • @amongdoomers9464
    @amongdoomers9464 4 ปีที่แล้ว +1

    Great

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

      Thanks for watching!

    • @amongdoomers9464
      @amongdoomers9464 4 ปีที่แล้ว +1

      @@TheCodeCreative Hey , can you do the snap scroll kinnda thing ,coz i couldn't find one on yt

    • @TheCodeCreative
      @TheCodeCreative  4 ปีที่แล้ว +1

      @@amongdoomers9464 I'm definitely planning on it 👍🏻

    • @amongdoomers9464
      @amongdoomers9464 4 ปีที่แล้ว +1

      @@TheCodeCreative You are nice guy. Have a great day man😎

  • @shift-happens
    @shift-happens 3 ปีที่แล้ว +1

    Do you also have a Valheim channel?? This voice...

    • @TheCodeCreative
      @TheCodeCreative  3 ปีที่แล้ว +1

      I don't know what Valheim is but perhaps I should? lol

  • @RajibBasu-t9c
    @RajibBasu-t9c 9 หลายเดือนก่อน

    i got this error:
    gsap.min.js:10 Invalid property ScrollTrigger set to {trigger: '.squre1'} Missing plugin? gsap.registerPlugin()

  • @derov2038
    @derov2038 ปีที่แล้ว

    blue light is bad for eyesight... @TheCodeCreative 's vscode... ALL THE BLUE LIGHT... this is a great tutorial serious so i cant even be mad but protect your eyes :P

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

    🎓 Course Available!: "DOM Events and JavaScript": store.thecodecreative.com/dom-events-and-javascript