Saltbox Posted November 8, 2022 Posted November 8, 2022 Hello! I am very thankful for Greensock forum to be so helpful for me before with my website. I've got +1 little moment of getting stuck in there without knowing what to do. I need to make on scroll text animation as on this reference website - https://www.joinsparq.com/ (as in "Say goodbye to labor fees" and other titles like this). I am using SplitText and trying to get the same effect, but I cannot achieve the same look of text getting from like... behind & bottom of the row and moving to the front & top? I am attaching a codepen of my current progress and that's how it looks when implemented on website (not quite it, right? ) - https://saltbox-new.webflow.io/workspaces I think the reference website itself might be using GSAP as well, but I don't seem to find it in their code, so will be glad to get any help or hint. Thanks in advance! P.S. An off question - is it possible to upload SplitText/SmoothScroll as CDN links? I am using sitebuilder, so cannot store files externally myself or upload them to the builder as well as pasting it as external code due to a limit of symbols. See the Pen YzvNPjW by turnhandup-the-sasster (@turnhandup-the-sasster) on CodePen.
Solution Rodrigo Posted November 8, 2022 Solution Posted November 8, 2022 Hi, You just need to add a perspective value to the text container, in this case the H1 tag: See the Pen gOKgpxz by GreenSock (@GreenSock) on CodePen. As for linking the Bonus Plugins, for obvious reasons those are not exposed. You don't want to have the files that you have paid for, being accessible to anyone who inspects your code and sees the links there. If you have no option create a single file with the entire code obfuscated and no comments (so no one can see what's in there). Perhaps @GreenSock can offer a better solution for this. Happy Tweening! 2
GreenSock Posted November 8, 2022 Posted November 8, 2022 Yep, you could just put the plugin code directly in with your own JS and minify it all. There's no reason they need to be separated in their own files.
Saltbox Posted November 25, 2022 Author Posted November 25, 2022 On 11/8/2022 at 11:00 PM, Rodrigo said: Hi, You just need to add a perspective value to the text container, in this case the H1 tag: As for linking the Bonus Plugins, for obvious reasons those are not exposed. You don't want to have the files that you have paid for, being accessible to anyone who inspects your code and sees the links there. If you have no option create a single file with the entire code obfuscated and no comments (so no one can see what's in there). Perhaps @GreenSock can offer a better solution for this. Happy Tweening! You saved me, thanks! @GreenSock just to outline the issue - I am using Webflow and it has a limitation of 20 000 that can be put inside <head> and before </body>. So yeah, SplitText fits ok, but when I tried to add ScrollSmoother - it's overflowing the limit. I don't know if there is a solution for that in my situation, but the problem exists. I quit using any scroll smoother for now, as everything I've tried except GSAP Smoother breaks by GSAP animation
GreenSock Posted November 25, 2022 Posted November 25, 2022 Are you saying Webflow has a limit of 20,000 what? Like...lines of code? And ScrollSmoother puts you above that limit or are you saying the height of an element must be less than 20,000. Sorry, it's very late for me and my brain is having a tough time understanding what you mean. How exactly is ScrollSmoother causing problems?
Cassie Posted November 25, 2022 Posted November 25, 2022 Hey @Saltbox Yeah, I see your issue. I'm afraid we don't have hosted versions of the club plugins. If there's a character limit in the webflow JS panel then you'll need to upload the files to your own server, and if you don't have that then you're a little stuck. Maybe someone over in the webflow forums can help advise you. 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now