Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Cool !!

Thank you legend!

Fire

🙏🙏

Slick! What's your opinion on Taxi? Prefer over Barba?

Thank you, Kyle! Well, both has pros and cons, Taxi imho require lot of manual* setup compare to barba in which already have lots of hooks that you can use. Taxi is a bit *snappier compare to barba, definitely going to be my go to transition lib now.

@_KyleCraven Got any suggestions to make it simpler to use?

@_KyleCraven Aheyy the creator himself! 🙏🙏 Dude, tbh, I'd prefer this compare to barba. I get to control a lot of different things, and it's already pretty straightforward too imho.

Awesome work man!

Thank you!

👏 👏 👏

🫶🫶🫶

ugal ugalan 🫵

Could you please share breakdown how to make such animation and transition if the thumbnail image is clicked, the full image appears with a wave animation?

Clone the mesh for the transition, map the new targeted position, and scale, send them data to the shaders, and add a small Math.sin to make that wavy stuff. There's a lot going on there, can't possibly break everything down here.

could you please share the code?

Hmm never planned to share this, sorry. @codrops Has a lot of things you can study, in-fact, most of the interactions I did here is coming from some of the webgl article from codrops.

Man this type of smoothness and using webgl and three js. Who let him cook 🤯🤯

@HananAbdul15345 Thank you! I'm trying...

this is great

Thanks!

@luisbizarro I love these animations. Great work!

@luisbizarro Thank you!

doesn't seem so mini anymore 💪

I know 😂😂

Love how smooth everything feels 👏👏

Thank you!

Proper digital experience. The navigation is very smooth throughout the site.

Thank you!

oh man i was looking for inspo as to what to do with this tall ass font im also using, this is stunning

Bebas Neue is actually one of the best condensed free typeface out there imho! and thank you so much!

Excellent 👌 Good job

Thank you!

Cool 🔥

🫶🫶

This is awesome! Love it 🥰

Thank you Anton!

What transitions… 👏

Thank you!

Love love love this 🫶🏻🫶🏻

Thank you 🫶🫶🫶

How did you make the stretch effect while scrolling the images?

On hover, you mean? Have no scroll-triggered interaction happening in here. That's a webGL plane with the texture comes from the html img itself, just bend it slightly on hover.