How to animate section scroll progress in nav links with GSAP

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

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

50% 1

Learn how to create a nav bar with section anchor links that display scroll progress through each individual section. We will leverage GSAP in Webflow with Javascript to recreate this remarkable navbar inspired by balky.studio.
👯‍♀️ Clone it:
try.webflow.com/cloneable-is-...
// GSAP Discount
🎢 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

Хобби

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

9 апр 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This idea come to my mind a week ago But I didn't know how to make it a reality. Thank you so much from my heart! btw I was inspired by the hover animation where you create exactly to same bg div but it interacts on hover. Another reason to wait for your version of this

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

glad you liked it! The hover interaction should be quite a bit simpler since you won't have to use ScrollTrigger or anything like that. But are you referring to filling the div from left to right on hover or the reticle style hover using GSAP Flip on the reference website?

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

@@webbae There is no need for gsap in this situation. You just need to use native Webflow interactions. Speaking of the div (hover color), positioning should the same as bg-nav-link - absolute. You can set any side of object as a start of filling. I can send a link of this tutorial but I don't know do I have an ability...

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

@@oikikku you could definitely do this with WF interactions but I don't think you could make it dynamic i.e. if you change number of sections or sizing then you'd have to reconfigure the animation. With this solution it's all handled programatically. I like this solution because I can write it once and reuse it over and over again :)

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

Thats great, thnak you. Now, how to make it go the other way around so it's animating from right to left when scrolling up?

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

you can use ScrollTrigger onEnterBack callback: gsap.com/docs/v3/Plugins/ScrollTrigger/#onEnterBack An example where I use a similar callback, onLeaveBack is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d3V-G0GfovQ.htmlsi=DOpZ_oIKieqn-fpj

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

Way cool!

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

Damn. Nice!

@PapaG-0101 3 месяца назад

Oh awesome 👏

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

Thanks 😁

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

is the code not in the cloneable?

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

Weird. Webflow caches the custom code section with my local dev script tag instead of the updated code sometimes. I republished everything and updated the link! Let me know if it doesn't work. webflow.partnerlinks.io/cloneable-is-bae?sub1=section-scroll-progress-nav