Web Unlocked
Web Unlocked
  • 54
  • 447 597
Stunning Image Hover Effects with HTML & CSS | Awwwards-Inspired Tutorial
Check out the tutorial and become more creative!
Project Source - gist.github.com/nicubarbaros/81e2f18bcd5a0a947f7cfd81fcd7fd65
Social Links:
github.com/nicubarbaros
nicubarbaros
In this tutorial, learn how to create eye-catching image hover effects using only HTML and CSS. Inspired by Awwwards, this step-by-step guide will walk you through the process of designing stunning hover effects that will make your website stand out.
Project bootstrapped by www.gatsbyjs.org/
┄┄┄ Timestamps ┄┄┄
New to the channel?
Hey, there my name is Nicu, I am a Front end developer. I'm here mainly because of a lack of creativity and hope to educate people on how to code projects that actually look good. If you have any suggestions on tutorials you would like to see feel free to DM me :)
Do you like the series? You can support the channel by buying me a coffee at bit.ly/3ABcKTw ☕️.
#awwwards
มุมมอง: 4 294

วีดีโอ

Smooth Layout Animation Using Framer Motion - Bonus
มุมมอง 1.6Kปีที่แล้ว
Check out the tutorial and become more creative! Live version - coming soon Project Source - coming soon Just fork to have the starter project bit.ly/2VWzFK7 (Gatsby) Social Links: github.com/nicubarbaros nicubarbaros In this upcoming video, I'll show you how to use Framer Motion and layout prop to create stunning animation and elevate your web development game. Project bootstrapped...
Smooth Layout Animation Using Framer Motion
มุมมอง 6Kปีที่แล้ว
Check out the tutorial and become more creative! Live version - coming soon Project Source - coming soon Just fork to have the starter project bit.ly/2VWzFK7 (Gatsby) Social Links: github.com/nicubarbaros nicubarbaros In this upcoming video, I'll show you how to use Framer Motion and LayoutId to create stunning animation and elevate your web development game. Project bootstrapped by...
New Locomotive Website: Feature Breakdown Video!
มุมมอง 2.8Kปีที่แล้ว
Let's look at the amazing just released, new Locomotive website. With a lot of surprises in hand that I'm really stoked about sharing with you. Social Links: github.com/nicubarbaros nicubarbaros New to the channel? Hey, there my name is Nicu, I am a Front end developer. I'm here mainly because of a lack of creativity and hope to educate people on how to code projects that actually l...
Smooth Layout Transitions with Framer Motion and NextJS | LocomotiveScroll Part 2
มุมมอง 5Kปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3qyAqEX ┄┄┄ Includes ┄┄┄ - Shared Layout animations - Multiple Dynamic Routes - 60 FPS animations - End page redirect - Cursor with beautiful flow - TypeScript 💜 - Hooks ┄┄┄ Social Links ┄┄┄ github.com/nicubarbaros nicubarbaros Project bootstrapped by nextjs.org/ New to the channel? Hey, there my nam...
Smooth Layout Transitions with Framer Motion and NextJS | AnimatePresence Part 1
มุมมอง 7Kปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3qyAqEX ┄┄┄ Includes ┄┄┄ - Shared Layout animations - Multiple Dynamic Routes - 60 FPS animations - End page redirect - Cursor with beautiful flow - TypeScript 💜 - Hooks ┄┄┄ Social Links ┄┄┄ github.com/nicubarbaros nicubarbaros Project bootstrapped by nextjs.org/ New to the channel? Hey, there my nam...
[Teaser] Smooth Layout Transitions with Framer Motion and NextJS | AnimatePresence
มุมมอง 8Kปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3qyAqEX ┄┄┄ Includes ┄┄┄ - Shared Layout animations - Multiple Dynamic Routes - 60 FPS animations - End page redirect - Cursor with beautiful flow - TypeScript 💜 - Hooks ┄┄┄ Social Links ┄┄┄ github.com/nicubarbaros nicubarbaros Project bootstrapped by nextjs.org/ New to the channel? Hey, there my nam...
Loader and Parallax Effect using Locomotive Scroll and Motion One Part 2
มุมมอง 3.9K2 ปีที่แล้ว
Check out the tutorial and become more creative! Live version - justacactus.netlify.app/ Project Source - github.com/nicubarbaros/youtube-tutorials-repo/tree/master/13.parallax-locomotive Just fork to have the starter project bit.ly/2VWzFK7 Custom Cursor - th-cam.com/video/rHGbUAtUUp4/w-d-xo.html Locomotive Scroll hook - gist.github.com/nicubarbaros/942588544ae2f36d97c50ad1cc0570ae Social Links...
Loader and Parallax Effect using Locomotive Scroll and Motion One Part 1
มุมมอง 13K2 ปีที่แล้ว
Check out the tutorial and become more creative! Live version - justacactus.netlify.app/ Project Source - github.com/nicubarbaros/youtube-tutorials-repo/tree/master/13.parallax-locomotive Just fork to have the starter project bit.ly/2VWzFK7 Custom Cursor - th-cam.com/video/rHGbUAtUUp4/w-d-xo.html Locomotive Scroll hook - gist.github.com/nicubarbaros/942588544ae2f36d97c50ad1cc0570ae Social Links...
Smooth Layout Transitions with Framer Motion and Gatsby | AnimateSharedLayout
มุมมอง 9K2 ปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3r51m0l Just fork to have the starter project bit.ly/2VWzFK7 ┄┄┄ Includes ┄┄┄ - Shared Layout animations - Multiple Dynamic Routes - 60 FPS animations - Grid Mouse parallax - Cursor with beautiful flow - TypeScript 💜 - Hooks Social Links: github.com/nicubarbaros nicubarbaros ┄┄┄ Timestamps ┄┄┄ 0:00 I...
[Teaser] Smooth Layout Transitions with Framer Motion and Gatsby | AnimateSharedLayout
มุมมอง 6K2 ปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3r51m0l ┄┄┄ Includes ┄┄┄ - Shared Layout animations - Multiple Dynamic Routes - 60 FPS animations - Grid Mouse parallax - Cursor with beautiful flow - TypeScript 💜 - Hooks ┄┄┄ Social Links ┄┄┄ github.com/nicubarbaros nicubarbaros Project bootstrapped by www.gatsbyjs.org/ New to the channel? Hey, ther...
Route Page Transition, Smooth Scroll & Custom Cursor with Framer Motion, Locomotive Scroll & React
มุมมอง 12K2 ปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code Link 👉🏽 bit.ly/3ESFdWX Just fork to have the starter project bit.ly/2VWzFK7 ┄┄┄ Includes ┄┄┄ - Route page transition animations - Multiple Dynamic Routes - 60 FPS animations - Horizontal Smooth Scroll - TypeScript 💜 - Hooks ┄┄┄ Timestamps ┄┄┄ 0:00 Intro 👋🏼 01:19 Project structure 08:00 Animating Image Component 23:11 Animating...
[TEASER] Route Page Transition, Smooth Scroll with Framer Motion, Locomotive Scroll & React
มุมมอง 8K2 ปีที่แล้ว
Check out the tutorial and become more creative! Buy the Source Code for the most requested video before the tutorial gets uploaded Link 👉🏽 bit.ly/3ESFdWX Just fork to have the starter project bit.ly/2VWzFK7 Includes - Route page transition animations - Multiple Dynamic Routes - 60 FPS animations - Horizontal Smooth Scroll - TypeScript 💜 - Hooks Social Links: github.com/nicubarbaros twitter.com...
Awwwards Remake | Part 6 of Recreating Malvah Projects Page - (Custom Cursor & Responsive)
มุมมอง 4.3K2 ปีที่แล้ว
Check out the tutorial and become more creative! Project Source (need to buy) - bit.ly/3ArdV88 Just fork to have the starter project bit.ly/2VWzFK7 Mixin Gist - gist.github.com/nicubarbaros/ec6ba6119e41703e1a3d184ac64ee728 Custom Cursor - th-cam.com/video/rHGbUAtUUp4/w-d-xo.html Part 1 - th-cam.com/video/uT3WCU8dZF4/w-d-xo.html Part 2 - th-cam.com/video/REy7ZpJkXX8/w-d-xo.html Part 3 - th-cam.c...
Awwwards Remake | Part 5 of Recreating Malvah Projects Page - (Opacity, Rotation & Transform)
มุมมอง 3.6K2 ปีที่แล้ว
Awwwards Remake | Part 5 of Recreating Malvah Projects Page - (Opacity, Rotation & Transform)
Awwwards Remake | Part 4 of Recreating Malvah Projects Page - (Smooth Interpolation Function)
มุมมอง 2.5K2 ปีที่แล้ว
Awwwards Remake | Part 4 of Recreating Malvah Projects Page - (Smooth Interpolation Function)
Awwwards Remake | Part 3 of Recreating Malvah Projects Page - (Parallax Mouse Effect)
มุมมอง 2.8K2 ปีที่แล้ว
Awwwards Remake | Part 3 of Recreating Malvah Projects Page - (Parallax Mouse Effect)
Awwwards Remake | Part 2 of Recreating Malvah Projects Page - (Infinite Scroll Effect)
มุมมอง 3.7K2 ปีที่แล้ว
Awwwards Remake | Part 2 of Recreating Malvah Projects Page - (Infinite Scroll Effect)
Awwwards Remake | Part 1 of Recreating Malvah Projects Page
มุมมอง 11K2 ปีที่แล้ว
Awwwards Remake | Part 1 of Recreating Malvah Projects Page
[TEASER] Awwwards Remake | Recreating Malvah Projects Page
มุมมอง 9K2 ปีที่แล้ว
[TEASER] Awwwards Remake | Recreating Malvah Projects Page
Next.js project in 60 seconds
มุมมอง 1.5K3 ปีที่แล้ว
Next.js project in 60 seconds
Awwwards Remake | Animated Menu MicroInteraction Using React & CSS
มุมมอง 15K3 ปีที่แล้ว
Awwwards Remake | Animated Menu MicroInteraction Using React & CSS
Awwwards Remake | Menu 3D Stack Effect Using React & CSS
มุมมอง 4.9K3 ปีที่แล้ว
Awwwards Remake | Menu 3D Stack Effect Using React & CSS
[TEASER] Menu 3D Stack Effect Using React & CSS
มุมมอง 3.5K3 ปีที่แล้ว
[TEASER] Menu 3D Stack Effect Using React & CSS
Awwwards Remake | Skew Distortion Effect on Scroll Using Locomotive Scroll & React
มุมมอง 7K3 ปีที่แล้ว
Awwwards Remake | Skew Distortion Effect on Scroll Using Locomotive Scroll & React
[TEASER] Awwwards Remake | Skew Distortion Effect on Scroll Using Locomotive Scroll & React
มุมมอง 4K3 ปีที่แล้ว
[TEASER] Awwwards Remake | Skew Distortion Effect on Scroll Using Locomotive Scroll & React
Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React Part 2
มุมมอง 44K3 ปีที่แล้ว
Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React Part 2
Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React Part 1
มุมมอง 80K3 ปีที่แล้ว
Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React Part 1
[TEASER] Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React
มุมมอง 18K3 ปีที่แล้ว
[TEASER] Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React
Awwwards Remake | Image Hover Effect Using React and CSS Episode 1
มุมมอง 15K3 ปีที่แล้ว
Awwwards Remake | Image Hover Effect Using React and CSS Episode 1

ความคิดเห็น

  • @mr.fabian8471
    @mr.fabian8471 26 วันที่ผ่านมา

    Thank you so much !!!

  • @opajobioyegokeoyebola1014
    @opajobioyegokeoyebola1014 2 หลายเดือนก่อน

    do you recommend using gsap scrollTrigger instead of the intersection observer, code feels ambiguous with it

  • @Ajay-cb2tc
    @Ajay-cb2tc 3 หลายเดือนก่อน

    where is the first part?

  • @palakkumar7943
    @palakkumar7943 4 หลายเดือนก่อน

    please make it responsive also

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

    Very impressive and interesting concepts. As someone who is fresh in this field, i am keep discovering so many new technologies every day. They might feel very overwhelming sometimes, thinking, "how i am supposed to learn all these new trends while i am still learning React" but at the same time its so exciting to know that one day i am gonna be able to use all these impressive animations and skills. PS: A nice idea would be if you could make a nice portfolio based on these amazing animations. Thank you for your guide!

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

    How you use scss without making css file ?

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

      There are other options, such as tailwind, in js solutions like styled components, and others. I would choose tailwind though.

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

    Edit : the gallery slider doesn't work for me... Sad but thank's for the huge rest part 🚀

  • @comiatimarius9846
    @comiatimarius9846 7 หลายเดือนก่อน

    This was very helpfull!

  • @gostgamming7126
    @gostgamming7126 7 หลายเดือนก่อน

    WOW THIS IS SOO AMAZING HAVENT SEEN THIS TYPE OF STUFF EVER EVEN IN PAID COURSES!😲

  • @craigmutugi5651
    @craigmutugi5651 7 หลายเดือนก่อน

    i am getting this error Module not found: Error: Can't resolve 'locomotive-scroll/src/locomotive-scroll.scss'

  • @yorox2515
    @yorox2515 8 หลายเดือนก่อน

    rdr2 copyright on his way :)

  • @tce1867
    @tce1867 8 หลายเดือนก่อน

    Great tutorial, i am keep getting"The requested module '/src/utils/Split3.min.js?t=1702556585312' does not provide an export named 'default'", how to fix this? Do you have any ideas?

    • @yrew2004
      @yrew2004 7 หลายเดือนก่อน

      same error : (

  • @taunado
    @taunado 9 หลายเดือนก่อน

    Love the simplicity - CSS ftw. The others will come around in good time.

    • @webunlocked
      @webunlocked 9 หลายเดือนก่อน

      Thanks for the kind words!

  • @Kai-cz7wf
    @Kai-cz7wf 10 หลายเดือนก่อน

    When I was doing same locoscroll.on just like at 40:47 . It giving error ".on isnot a function" can any one please tell me why..?

    • @omnandurkar3490
      @omnandurkar3490 3 หลายเดือนก่อน

      Same error message , do you get any solution for that?? if you get please tell me !! I have been trying to install locomotion from past 7 hrs using chatgpt and every possible way but just cant

  • @d.i-boygaming4084
    @d.i-boygaming4084 11 หลายเดือนก่อน

    Atleast give Starter files

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

    wheere is locomotive js

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

    hi are there is any reasn to use scss specificly? thank you

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

      yes, what I love the most is cascading, you cant (for now, there is a proposal already for standard css) do it for now with css. others are loops and if statements, arrays and iterations through arrays. Nowdays the standard CSS is getting closer and closer to what SCSS actually was better, but still there are things that SCSS is better at.

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

      @@webunlocked i see, thank you for the reply. also thank you for the tutorial. it really give me insight how to make this kind of website. :))

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

    Part 1: th-cam.com/video/m5oouFzHf7w/w-d-xo.html

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

    Great video! thank you, also please increase the mic volume for future videos as it's quite low.

  • @TheAI-Tutor
    @TheAI-Tutor ปีที่แล้ว

    Can I make the same in React.js? How to do it, I am kinda confused

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

    If I deployed this website, scrollTrigger is not working. Only first item is showing and rest of place become empty. why it is happening?

  • @user-zl2nt7zx8h
    @user-zl2nt7zx8h ปีที่แล้ว

    thanks!

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

    how do i add a lag in the movement of cursor?

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

    Can you make same animation with simple html css javascript gsap

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

      is this a request?

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

      ​@@webunlocked yes bro please make this same animations with html css javascript gsap scroll trigger locomotive.

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

    Nice Tutorial. I was able to achieve the momentum effect just by adding transition to the slider element

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

    Promo`SM

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

    80 usd for the code? 😆

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

      yep, cheap right? 😆

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

    Keep it up dont worry about the negative comments. You are teaching so valuable things that no one is talking about. Suggestion: Please make a playlist for basics like framer and then going in deep how to use it in projects.

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

      noooo worries, Im working now on a full series on framer motion, I hope its gonna be good!

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

    Hey guys. I updated the github repo with the new update code. Everything is tested and should work properly now! github.com/nicubarbaros/youtube-tutorials-repo/tree/master/scroll-trigger

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

    Hey guys. I updated the github repo with the new update code. Everything is tested and should work properly now! github.com/nicubarbaros/youtube-tutorials-repo/tree/master/scroll-trigger

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

    I have a question please why do you use locomotive-scroll and not the react version of it ? also can you update this video to the react version because i cannot find it else where

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

      Hey razor, I'm not sure its gonna work with react locomotive scroll, because we have to register the the locomotive scroll to the scroll trigger plugin.

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

    not interesting sorry

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

    Isn't this too basic?

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

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

      It may be for you but for beginners there are things to learn from this video.

    • @taunado
      @taunado 9 หลายเดือนก่อน

      “Simplicity is the ultimate sophistication” (Leonardo Da Vinci)

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

    this is too simple for anyone to make , please do some advanced stuff

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

    Love your tutorials. Can i ask make a suggestion on an awwward site to recreate ?

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

      absolutely! you can DM me on twitter. I'm gonna open a Discord server very soon so stay tuned!

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

    Very impressed by the content you provide, thank you for sharing these awesome animations 😍

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

    Legend is back 😇 happy to see you back and sharing such creative tuts looking forward for more such tuts 😇🤩

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

    man i simply created a website with html css and js, added locomotive its working well when im scrollling down but when im scrolling up its not working well can anyone help me :( trying to fiiix this issue from 5days

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

      can you push to a public repo and give me the link so I can look into?

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

      @@webunlocked damn thankyou for responding lol really thankyou !! so again the issue is i added locomotive scroll while scrolling down its working well but when i scroll to the top slowly, the elements are appearing late on the screen its just like glitch you know suddenly appearing on the screen 1 or 2 sec late . Even i copy pasted other people code but still same issue

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

      i will be so glad if u help me on this i've been trying to fix this issue from alot days

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

      @@sourabh2505 you could DM me on twitter

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

      Still waiting for ur reply on Twitter 🥲

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

    I am so mad I just found your channel now only. I can't sleep and want to do all your videos. My mind is blown by how much cool content is in here. Subbed!!

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

    There goes my weekend coding along with you. You have helped bump up my creative development skills. Thanks so much for such great content.

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

    Hey Nicu, I think there’s an issue with the Gallery section, whenever I scroll through it doesn’t display the photos or scroll horizontally, it scrolls vertically directly to the footer and ignores that section, did anyone face the same issue?

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

      its something to do with the scroll stop plugin and locomotive scroll for sure. can you push to a public repo and give me the link? you can DM me on twitter

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

      Unfortunately I don’t use Twitter, but I’ll be happy to provide you with the link here. (PS: TH-cam doesn’t allow external links to be shared in the comment section, so I’ll just paste you the path) /quddossaoudi/photographer

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

      @@QuddosSaoudi Got it. I'm gonna look into it

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

      Hey man sorry for the late response. I updated the code, it should work. I've tested github.com/nicubarbaros/youtube-tutorials-repo/tree/master/scroll-trigger

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

      Thanks Nico, I greatly appreciate it

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

    Aside from the super interesting video that mouse cursor is dope. Where do I find the video where you build it?

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

      The logic can be found here th-cam.com/video/nvhNp2A3hxI/w-d-xo.html