Day 36/100 - GSAP & Barba.js Zoom-Out Page Transition in Webflow - 100 Days of Webflow

Welcome to Day 36 of my 100 Days of Webflow challenge!
Today, we're exploring how to create a stunning zoom-out page transition using GSAP and Barba.js. This animation will take your user experience to the next level, making your project cards come alive as they transition into full project pages.
📋 What You'll Learn:
Setting up GSAP and Barba.js in Webflow
Creating the zoom-out animation for project cards
Implementing the transition to the project page
🔗 Useful Links:
Levelflow Website
www.levelflow.io/
Cloneable
webflow.com/ma...
👉 Up Next:
Join me for Day 37 as we continue to explore more Webflow magic.
If you found this video helpful, don't forget to give it a thumbs up, share it, and subscribe for more Webflow goodness!

[@filetmignon9978]

Didn't you have to add code to restart webflow interactions so that they'd work after moving to a page with barba?

[@melliswell]

Great tutorial! unfortunately I don't think you ever left the slater code. Please could you link this. Would be super helpful for me :)

[@akshitnassa6833]

Where Can I find the code?

[@yamix.brands]

The algorithm reads my mind, exactly what i was looking for ❤❤

[@yaroshidi]

Best comment! Thank you 🙏

[@allenidza7528]

Thank you! Can you pin from slatter app? In clonable project is missed this code

[@josephgraham6098]

Thank you for sharing this! Would you mind sharing your learning path for GSAP and Barba?

[@yaroshidi]

I like challenging myself as you can see, and to practice by doing. That always works for me when learning new topics

[@TomSommerseth]

What an amazing journey to be part of and thank you for sharing your knowledge and experience albeit some can be quite technical, but you explain it so well. Cheers from Norway! 🥳👏🏼

[@yaroshidi]

Thank you for your kind words Tom!
I am very happy that you are enjoying my content🙌

[@niceman2405]

Hello yar, I'm Aicha. ❤

[@Alerrrrrt]

Idk if u understand,but when u using barba u need to reload all the js script ,so u can’t use barba + webflow built in animation

[@filetmignon9978]

Isn't that why all his other animations are css animations? Not webflow animations?

[@conglo3650]

nice tutorial bro, I just suscribed yesterday and im learning too much with your tutorials. Can you try make responsive this lesson? Thank you and cheers!

[@yaroshidi]

Will come back to this for responsiveness

[@VasanthClutcher]

Great Vid Yar!

[@niceman2405]

❤

[@masonpoe8286]

Incredible how you outline the steps to building this transition - going to try this now!

[@yaroshidi]

I am really glad you liked it Mason, I would love to see what you come up with!