I got challenged to build this EPIC hero animation [GSAP Flip Lesson]

Подписаться 8 тыс.

Просмотров 3,7 тыс.

50% 1

Adam from Relume asked X (Twitter) who could build his flashy hero layout animation concept in Webflow. In 1 hour I had a working prototype using the GSAP Flip plugin by Greensock, which ended up landing me the gig! In this video I'll show you how I went about creating that concept piece that got me the job. Of course the devil is in the details though - adding the polish to get this animation ready for production took another 7 hours!
👯‍♀️ Clone it:
try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
00:00 Introduction
00:35 Webflow Project Overview
03:29 Coding with GSAP Flip

Хобби

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@Muzamalhussain155 6 месяцев назад

🤩🤩

@Diego_Cabrera 7 месяцев назад

GSAP is truly amazing. Also respect for getting at quick, I remember seeing your reply not long after the original tweet. Keep it up man!

@webbae 7 месяцев назад

Thanks Diego! I like to work fast! 💨

@heatherliu6856 7 месяцев назад

Epic collab🎉

@justus4711 7 месяцев назад

You’re the man 🤙🏻 Thank you for this!

@webbae 7 месяцев назад

🥳

@SantiYounger 6 месяцев назад

These animations are next level! thanks for sharing this, I definitely want to play around trying to integrate this into my site

@webbae 6 месяцев назад

Good luck!

@brandocean6322 7 месяцев назад

Bosss🔥

@user-kf6bc1oe9h 7 месяцев назад

great video! Thanks 😊

@webbae 7 месяцев назад

Glad you liked it!

@akbarbadsha25 7 месяцев назад

Wow great job 👏 keep going

@webbae 7 месяцев назад

Thank you so much 😄

@surendarr2177 7 месяцев назад

Thank you for the lesson sensei

@webbae 7 месяцев назад

The honor is all mine, bright grasshopper

@tryderrick 6 месяцев назад

This is insane

@webbae 6 месяцев назад

🤭🤭🤭

@usamaansari4224 7 месяцев назад

How can i learn to do the same, as a noob i can barely understand what's happening there.

@webbae 7 месяцев назад

If you are in Webflow start with IX2 animations. If you want to dive into code use the link in description for Carl’s Creative Coding Club course! It’s very thorough.

@webbae 7 месяцев назад

This one! www.creativecodingclub.com/bundles/creative-coding-club?ref=f5f1d2

@GabrielOkpo 7 месяцев назад

Thanks for this. Need to step up my learning of GSAP in 2024 🫡

@webbae 7 месяцев назад

Check description for some good GSAP resources! I like creative coding club a lot.

@cktm4867 6 месяцев назад

Amazing. How to change the event listener to respond to scroll events instead of click events: I want to remove the button and trigger the shuffling animation solely based on scrolling. The workaround below does not seem to be working: window.addEventListener("scroll", () => { const state = Flip.getState([...images, heading, subheading]); if (currentState === 0) { currentState = 1; images.forEach(image => { stateTwoImageContainer.append(image); });

@webbae 6 месяцев назад

you can add scrolltrigger plugin via scrolltrigger property in the Flip animation. Here's an example: codepen.io/maciekmaciej/pen/RwEjvMB

@cktm4867 6 месяцев назад

Thanks for the hint.