[TEASER] Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React

[@webunlocked]

For a live version - flirtyflowers.netlify.app/

[@webunlocked]

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?

[@amanmool5254]

Pls don't skip part 1... It will be helpful for beginner like me.

[@webunlocked]

@@amanmool5254 Hey Aman, part 1 is up! kzbin.info/www/bejne/iYHalGZ4itVojMk

[@webunlocked]

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.

[@mrastrogastro]

How this will behave on mobile device?

[@webunlocked]

@@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).

[@mrastrogastro]

@@webunlocked maybe once you could wrap whole thing like a proof of concept :) It would be a real use case :)

[@webunlocked]

@@mrastrogastro yep yep, I should dig my fingers into responsiveness and performance as well

[@nivedinpsuryan3618]

Just mind🤯..katta waiting

[@mohammedfaris5326]

Bait cheyy

[@nivedinpsuryan3618]

@@mohammedfaris5326 Ok ser 😄

[@mirage4731]

I was literally looking for this type of animation tutorial, thanks a lot 🔥🔥❤️

[@webunlocked]

glad you came!!!

[@webunlocked]

Do you think this should be tagged as Awwwards Remake?

[@mrastrogastro]

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!

[@webunlocked]

@@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.

[@zokirjon.y]

Good job bro. But how can make responsible

[@amanmool5254]

Love your content bro... may i ask when is the release date?

[@iviixio]

Cant Wait! Keep Up the Good Work

[@webunlocked]

wow, you follow me 🥳. Huge fun of your channel too :P Thanks a lot!

[@paschalkings8184]

You're the best

[@АлександрМелянюк-ц9ю]

You are the best!

[@appropriateturnip]

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.

[@webunlocked]

thank a lot!! I wont stop. Just need time to prepare.

[@appropriateturnip]

@@webunlocked sure dude... thanks again...

[@webunlocked]

Part 1- kzbin.info/www/bejne/iYHalGZ4itVojMk

[@alebuda117]

blow mid!

[@webunlocked]

🤯