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

Рет қаралды 3,978

Күн бұрын

Пікірлер: 27

@SantiYounger 10 ай бұрын

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

@webbae 10 ай бұрын

Good luck!

@Muzamalhussain155 10 ай бұрын

🤩🤩

@heatherliu6856 10 ай бұрын

Epic collab🎉

@Diego_Cabrera 10 ай бұрын

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 10 ай бұрын

Thanks Diego! I like to work fast! 💨

@justus4711 10 ай бұрын

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

@webbae 10 ай бұрын

🥳

@tryderrick 10 ай бұрын

This is insane

@webbae 10 ай бұрын

🤭🤭🤭

@CarmenHope-x9y 10 ай бұрын

great video! Thanks 😊

@webbae 10 ай бұрын

Glad you liked it!

@surendarr2177 10 ай бұрын

Thank you for the lesson sensei

@webbae 10 ай бұрын

The honor is all mine, bright grasshopper

@brandocean6322 10 ай бұрын

Bosss🔥

@akbarbadsha25 10 ай бұрын

Wow great job 👏 keep going

@webbae 10 ай бұрын

Thank you so much 😄

@usamaansari4224 10 ай бұрын

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

@webbae 10 ай бұрын

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 10 ай бұрын

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

@cktm4867 10 ай бұрын

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 10 ай бұрын

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

@cktm4867 10 ай бұрын

Thanks for the hint.