Jump to content
Search Community

Perspective (3D?) text animation on scroll

Saltbox test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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? :D )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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...
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 :D 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...