an svg logo that starts off in the middle of the page and shrinks (reduce the spacing) the more you scroll down and then eventually goes into navigation bar and snaps to form the main nav bar logo. I've seen such being done with GSAP but don't know how to.
what I always love about this kind of tutorials is that the video's lenght is about 15 minutes and it takes me like few days to apply it to my project hahaha thanks for the work!
Awesome idea, thanks for the inspiration. To avoid seeing a misalignment in the progress bar, even though the middle element is centered, or it even not reaching 100% at all, here is my solution. Remove the progress bar animation completely and work with the onUpdate callback function in the scrollTrigger of scrollTween to couple the width with the animation progress: ---- ..., scrollTrigger: { ..., onUpdate: (self) => { mask.style.width = Math.min(self.progress * 100, 100) + "%"; } } ---- Hope it helps
What other types of interactive examples would you like to see?
Marquees! Vertical, horizontal, interactive or background. Marquees!
Yes
an svg logo that starts off in the middle of the page and shrinks (reduce the spacing) the more you scroll down and then eventually goes into navigation bar and snaps to form the main nav bar logo. I've seen such being done with GSAP but don't know how to.
3d objects .obj .glft
more tutorial for Barba.js & Some Beginner tutorials for three.js
what I always love about this kind of tutorials is that the video's lenght is about 15 minutes and it takes me like few days to apply it to my project hahaha
thanks for the work!
Awesome idea, thanks for the inspiration.
To avoid seeing a misalignment in the progress bar, even though the middle element is centered, or it even not reaching 100% at all, here is my solution.
Remove the progress bar animation completely and work with the onUpdate callback function in the scrollTrigger of scrollTween to couple the width with the animation progress:
----
...,
scrollTrigger: {
...,
onUpdate: (self) => {
mask.style.width = Math.min(self.progress * 100, 100) + "%";
}
}
----
Hope it helps
This is very helpful! Thank you!
Bro i was trying to do it last week, wallah i luv you!!
This is going to impress my grandma for sure
Always love to see your work. Going to sign up for the advance course.
Thanks alot, been searching everywhere for this effect.
I learned a lot from your video. Thanks for your hard work and good explanation. Youre always the first address when i have to solve some problems.
Justo estaba ocupando hacer esto hoy, 5 estrellas por el servicio 😎
So cool 😎 already bought your css course 😍 what i still don't know: how to add this to a wordpress site 🙃
Thank you
How to make this element with mask using Figma?
🎉🎉🎉 great thanks
Hi! I want to know that what if we want 6 sections hot manage that
xPercent: -100 * (sections.length - 1),
What values to change???
how about to do vertical & horizontal fullpage scroll like in fullpage js horizontaly scroll but with GSAP?
How works one integrate this into WordPress?
Give the ful code please !
How much is the new advanced front end course gonna be
$99'ish, but there's always a discount floating around. ;)
@@DesignCourse great, if you can get me 40% off I buy it instantly
how to remove this subtitles scroller-start, end
first view and like
First view
Great content as always but no offence but .. ayy .... ayy ... aaayyyy ...
DO you have covid?