Bring your website to life with Webflow interactions and GSAP animations
HTML-код
- Опубликовано: 7 июн 2024
- If you're a designer, you've likely heard your clients asking you to "Make it pop". In today's stream we have acclaimed web designer, Carter Ogunsola, join us to answer that question and demonstrate how to bring our websites to life.
We'll discuss ways to make your content stand out by applying layout fundamentals within a minimalistic aesthetic. Additionally, we'll explore how to bring static content to life with Webflow interactions and introduce you to next level animations with GSAP.
If you're eager to elevate your skills and craft websites that truly stand out, this episode is for you.
Download the cloneable and more resources:
wfl.io/making-it-pop
0:00 Starting soon
2:59 Making it pop
4:27 Intro - Carter Ogunsola
5:15 Carter's websites
8:00 Saul Rhand Website
8:50 Part 1 - Layout fundamentals
13:47 Part 2 - Webflow Interactions
18:20 Interaction Tip: Hover out duplication
21:45 GSAP text line animation
23:00 Installing GSAP
26:04 Scroll trigger start
28:00 Stagger effect
30:18 Q&A - Where does the code go?
32:52 Q&A - GSAP script vs js code
33:35 Q&A - Community Resources for GSAP
35:44 Final Words from Carter
36:55 End Credits
It gotta say, McGuire Brannon's style was really good.
This was good. Would've loved for it to touch on more animations, but all in all appreciate the efforts, guys.
Glad you liked it Tony. Would you like us to walk you through an animation build from scratch? And what specific animation would you like us to cover? Or would you prefer if we just covered lots of other animations at a high level?
@@Webflow Yes to the last question. I think the tutorials on animation from the Weblow university do well to cover the basics.
Why cant Webflow bring GSAP visual animation tool into Webflow why?
Not the best tutorial :(
What could have made it better? Would you have wanted to dive deeper into an area? Anything specific that you'd like us to cover? We're always trying to improve so your feedback counts! Thanks for watching 🫶
@@WebflowIt's super confusing because in the example site has all the interactions listed there which makes it harder to follow through. Should have used the simplified version of the layout, remove every other list items (From the Projects) It would have been nice to do it from scratch, having existing properties then duplicating it to show the example never works.
I had no idea what he was doing half the time, I know he used the hover property to move the element down but didn't understand how it had that rolling effect.
@@rumali_roti7406 yes exactly right 🙏🏼
@@Webflow see the other comment below 😁 You giys should build it from scratch so people can follow along... The guest designer just spoke the entire time without showing or teaching us anything really... A waste because this is a great topic thay could have helped a lot of people
This is great feedback Rumali. Thank you - we'll make sure to dive a little deeper into the animation in the future. There was a lot to cover and didn't know if others would want a deep dive into animation.