Jump to content
Search Community

All animations working locally, but some are not on a Vercel preview link.

kvncnls test
Moderator Tag

Recommended Posts

This is a really odd situation and I can't seem to figure out why— nor do I know how to even ask it properly, but here goes:

I'm a Club Greensock Member (yay!) and am using SplitText in this Nextjs project.
I use SplitText to animate the text into view via scrolltrigger. Works PERFECTLY on localhost.

But when I push this into github and get the preview link on Vercel (so my client can review it), the text animations don't work.
But here's the kicker: SplitText is doing its job. I inspected the DOM on the preview link, and the text IS being split properly. It's just that they're not animating. ALL other GSAP animations are working though! The only animations that aren't working are on the elements using SplitText on the Vercel preview link.

 

Looking at all of the animations as a whole, the SplitText animations are being initiated using gsap effects. That's the only difference I can see— but that doesn't explain why it works locally but not on my Vercel preview link.

 

I have other animations being used via gsap effects and they're working fine. I have no idea why this one doesn't.


Any ideas?

Here's my 'revealText' gsap effect. Again, it works locally, but not on the Vercel preview link.

gsap.registerEffect({
  name: "revealText",
  effect: (targets, config) => {
    return gsap.from(targets, {
      yPercent: 150,
      skewY: config.skewY,
      duration: config.duration,
      ease: config.ease,
      scrollTrigger: {
        trigger: targets,
        start: "top 80%",
      },
    });
  },
  defaults: { duration: 1.2, ease: "Sine.easeOut", skewY: 0},
  extendTimeline: true,
});

 

Link to comment
Share on other sites

That does sound pretty weird. Are there any errors thrown in the console? I wonder if your effect gets registered AFTER you try using it? I have no idea why your code would execute in a different order on Vercel (I'm completely unfamiliar with that). 

 

You did register both SplitText and ScrollTrigger (gsap.registerPlugin()) right? 

 

It's super difficult to troubleshoot blind, sorry.

 

You're definitely using the latest version of all the GSAP files, right? 

Link to comment
Share on other sites

20 minutes ago, GreenSock said:

That does sound pretty weird. Are there any errors thrown in the console? I wonder if your effect gets registered AFTER you try using it? I have no idea why your code would execute in a different order on Vercel (I'm completely unfamiliar with that). 

 

You did register both SplitText and ScrollTrigger (gsap.registerPlugin()) right? 

 

It's super difficult to troubleshoot blind, sorry.

 

You're definitely using the latest version of all the GSAP files, right? 

The only console logs being thrown are 'GSAP Target not found' or 'GSAP Target null not found'.
I'm using Nextjs if that helps.


SplitText and ScrollTrigger are both registered, yes.


All animations work locally even with these console logs. But when I push them to Vercel, the animations associated with SplitText don't work. It's odd because the text is actually being split by SplitText. It's just scrolltriggers no longer work with it... But scrolltrigger works fine for everything else.

Link to comment
Share on other sites

That kinda sounds like your code is executing before everything fully loads and the layout is settled. Like maybe the page's "load" event fired (which calls ScrollTrigger.refresh()) and THEN your framework/code actually put things on the page. I don't really know - I'm guessing here because I don't have a minimal demo to look at. Maybe try calling ScrollTrigger.refresh() after you're POSITIVE that everything is completely done being loaded and the browser has rendered it. Also I wonder if you're getting bitten by the React 18 double-useEffect() call thing. Are you using gsap.context() to make sure you're cleaning up everything properly? Please read this article: 

 

  • Like 1
Link to comment
Share on other sites

Ok I found a work-around.
I tried using another dependency that fulfills the same role as GSAP's SplitText and that seemed to work.
Now all GSAP animations on my texts work locally and on the preview links on Vercel.

Something must be going on with SplitText. While it DOES split the text, it doesn't allow animations to occur on the Vercel preview links. I have no idea why.

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...