[TEASER] Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Check out the tutorial and become more creative!
Live version - flirtyflowers....
Social Links:
github.com/nic...
/ barbarosnicu
Yes, that's quite a lot of technologies into a tutorial, but don't worry it's not complicated, in the end, folks who are creating awesome websites don't limit themselves to just a single web technology, don't they?.
We will use 3 technologies, Locomotive Scroll to have a smooth juicy scroll, GSAP to create our scroll-triggered horizontal scroll & text-based animation, and in the end, Intersection Observer to animate some pictures that are getting into the viewport.
Project bootstrapped by www.gatsbyjs.org/
New to the channel?
Hey there my name is Nicu, I am a Front end developer.I'm here mainly because of lack of creativity and hopefully 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 www.buymeacoff... ☕️.
#awwwards #gsap #locomotive
For a live version - flirtyflowers.netlify.app/
Just mind🤯..katta waiting
Bait cheyy
@@mohammedfaris5326 Ok ser 😄
I was literally looking for this type of animation tutorial, thanks a lot 🔥🔥❤️
glad you came!!!
You're the best
Cant Wait! Keep Up the Good Work
wow, you follow me 🥳. Huge fun of your channel too :P
Thanks a lot!
hey dude... u r doing an amazing job. just pls don't stop... u r making the kind of websites we see on dribbble, awwwards and behance... gg.. and thanks for all the amazing tutorials.
thank a lot!!
I wont stop. Just need time to prepare.
@@webunlocked sure dude... thanks again...
You are the best!
The full production gets quite big and I think I will divide it into 2 or maybe 3 parts. Part 1 will be all about setting up components and their style, then for part 2 we will deep dive into Locomotive and GSAP (and maybe part 3)
What do you guys think?
Or should I skip part 1 and give you a repo with the full structure on?
Pls don't skip part 1... It will be helpful for beginner like me.
@@amanmool5254 Hey Aman, part 1 is up!
th-cam.com/video/SPwc3BUp5Vg/w-d-xo.html
Do you think this should be tagged as Awwwards Remake?
Well definitely yes! I just watched this teaser and it's like awwwards remake! I'm happy to see Locomotive Scroll in action! Awesome stuff, never tried it before.. Though maybe you used it in one of your tutorials before? I think I saw it somewhere on your channel!
@@mrastrogastro yes I did, for horizontal scroll a believe. super handy, but has some problems when you have lots of media that need to be fetched and loaded.
We will use 3 technologies, Locomotive Scroll to have a smooth juicy scroll, GSAP to create our scroll-triggered horizontal scroll & text-based animation, and in the end, Intersection Observer to animate some pictures that are getting into the viewport.
How this will behave on mobile device?
@@mrastrogastro theoretically it should be ok, they all have support for mobile. But it needs to be built for responsiveness (though not in this video).
@@webunlocked maybe once you could wrap whole thing like a proof of concept :) It would be a real use case :)
@@mrastrogastro yep yep, I should dig my fingers into responsiveness and performance as well
Good job bro. But how can make responsible
Love your content bro... may i ask when is the release date?
blow mid!
🤯
Part 1- th-cam.com/video/SPwc3BUp5Vg/w-d-xo.html