No video :(

How to Build Magnetic Tooltips with GSAP Flip

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

Просмотров 1,8 тыс.

50% 1

Let's create this mouse-following magnetic tooltips with GSAP Flip plugin in Webflow as seen at usetola.com. We'll create mouseenter and mouseleave events on our CMS items in conjunction with the greensock animation platform FLIP plugin to create a unique and wonderful little tooltip component.
🫡 Inspo: usetola.com/
// CLONE IT
👯‍♀️ try.webflow.com/cloneable-is-...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// 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...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

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

30 апр 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@farhan-app Месяц назад

I personally don't use Webflow (using WordPress), but I love the way you explain things - I can easily translate to WordPress! :)

@webbae Месяц назад

Thanks Farhan- I really appreciate your nice comments. Just 2 weeks ago I had someone tell me that it took them FOREVER to unravel my code from Webflow, but it was for a different video. Code is code but sometimes I do have to do goofy little workaround for Webflow. I'll try to keep the rest of the internet in mind! I'd love to start adding codepen examples too just need to find the time!

@heatherliu6856 3 месяца назад

GSAP is bae

@webbae 3 месяца назад

Bae knows 🤝

@designjayesh7928 3 месяца назад

Thanks for sharing it man! Loved what you done over here!

@webbae 3 месяца назад

Thank you!

@justus4711 3 месяца назад

My man always coming out with the exact tutorials I need at the right time 🤙🏻

@webbae 3 месяца назад

Glad it helps! Would love to see what you come up with.

@justus4711 2 месяца назад

@webbae If my client lets me eventually show the work then I’ll def share a link

@system2213 2 месяца назад

Can you add a delay so the tooltip appears after 1s but when switching from one to the other it switches instantly? This is something I've seen a lot but it's achieving it in Webflow is challenging.

@webbae 2 месяца назад

sure you could use a boolean named isFirstHover. in the event listener for mouseenter of the list, first check the value of isFirstHover and depending on if it's true or false use setTimeout to wait 1 second. something like that. chatGPT should be able to get you there!