Another web bae banger! So would you usually recommend GSAP scripts being provided in the head tag with defer? And is there any reason you used a function for end instead of "end: '+=25%' " - Alex Beige
I'm pretty sure that "end: +=25%" will be relative to the viewport instead of the actual text element (need to verify). It might still work relative to viewport (since our text sizing is done with vw) if you bring that percentage down (or up? I forget if it's relative to top or bottom of viewport... I just always use the markers to fine tune lol). I actually experimented with some simpler options like you mentioned but ended up going with the function since I knew it would get me the responsive behavior I needed.
yea had fun with this one. It would also require separate on-load and on-scroll aniamtions which I anticipate might cause some conflicts. I'm curious to try it in Webflow IX2 if I get the time... maybe a prototype. You might still need JS to prevent body scroll while the on-load animation plays... something like that.
pretty much yes but it also depends :). Be careful with it because lighthouse score might get angry about the time to paint metric or whatever that one is but I find when we are trying to get fancy we have to make some tradeoffs with lighthouse.
wont work if javascript is disabled. I think you are referring to "flash of unstyled content" in your second note. Please see: gsap.com/resources/fouc/
Hi Webbae, i was just wondering if theres a way to use a embed svg for the heading on your clondable? I replaced the heading with the embed (my logo) and changed the div name to .heading but no luck.
Hey you could do it but you’ll have to ditch the SplitType library which works with text. You could target the individual SVG elements manually or programmatically … it depends on your SVG. Feel free to share a link in discord and maybe I can help more
Awesome, thanks for sharing
Thanks for watching!
THE ENDING HAHAHAH
trying out something new :)
Nice ending 😂
hahaha glad to hear someone made it to the end 🤣. Had fun with that one.
Another web bae banger! So would you usually recommend GSAP scripts being provided in the head tag with defer? And is there any reason you used a function for end instead of "end: '+=25%' " - Alex Beige
I'm pretty sure that "end: +=25%" will be relative to the viewport instead of the actual text element (need to verify). It might still work relative to viewport (since our text sizing is done with vw) if you bring that percentage down (or up? I forget if it's relative to top or bottom of viewport... I just always use the markers to fine tune lol). I actually experimented with some simpler options like you mentioned but ended up going with the function since I knew it would get me the responsive behavior I needed.
This would probably take 10x longer to set up with Webflow interactions. Thanks for sharing!
yea had fun with this one. It would also require separate on-load and on-scroll aniamtions which I anticipate might cause some conflicts. I'm curious to try it in Webflow IX2 if I get the time... maybe a prototype. You might still need JS to prevent body scroll while the on-load animation plays... something like that.
Hi bro, how I can achieve animation, like when I scroll, words collapse each other and animate with my scrolling,
Can you send me an example of what you are going for?
Discord the best place to ask
That’s awesome, thanks! Do you use visibility:hidden only on objects above the fold?
pretty much yes but it also depends :). Be careful with it because lighthouse score might get angry about the time to paint metric or whatever that one is but I find when we are trying to get fancy we have to make some tradeoffs with lighthouse.
@@webbae thanks for your explanation! I was always wondering when and where to use it!
will it work if browsers javascript is disable??
if i use from initial render will display text in final position and then start animating
wont work if javascript is disabled.
I think you are referring to "flash of unstyled content" in your second note. Please see: gsap.com/resources/fouc/
Hi Webbae, i was just wondering if theres a way to use a embed svg for the heading on your clondable? I replaced the heading with the embed (my logo) and changed the div name to .heading but no luck.
Hey you could do it but you’ll have to ditch the SplitType library which works with text. You could target the individual SVG elements manually or programmatically … it depends on your SVG. Feel free to share a link in discord and maybe I can help more
That would be amazing! How do I get in touch on discord? I sent a friends request to "webbae" it went through, but doubt it has lol @@webbae
discord.com/invite/pwfDptfBZb
this requires the paid workspace basic plan right?
Nope these are all free tools! You’ll need a paid workspace or site plan for the webflow embed element but I’m not using that here.
@@webbae yeah but now they have made even custom code paid through a workspace plan. we can not add custom code.
@@shivayvinaik7794 wow I had no idea! What a shame! I may have to rethink some channel ideas 😭
❤
💯
👏
thanks thomas!