Jump to content
Search Community

SplitText responsive - howto revert()?

Patte test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi,

I am glad to ask my first question here in the fantastic forum ;-)
In my first CodePen I try to make this split text animation responsive.

 

    const animateLines = new SplitText(".is-style-animate-lines", {type: "lines"});

    gsap.set(animateLines.lines, {opacity: 0});

    ScrollTrigger.batch(animateLines.lines, {
      onEnter: batch => {
        gsap.set(batch, {opacity: 1, yPercent: 100});
        gsap.to(batch, {
          yPercent: 0,
          duration: 0.4,
          stagger: 0.2
        });
      },
      onLeaveBack: batch => gsap.to(batch, {opacity: 0, yPercent: 100}),
      start: "bottom 94%",
    });

 

I had other approaches first, but came across ScrollTrigger Batch here, which is what I would like to use to animate all H1 that enter the viewport.

However, my problem is that the text is not responsive and I just can't get it to return to the origin with revert().  I guess this happens at the resize event? Or when the animation has finished running?

Maybe someone can give me a tip?

 

Many thanks
Patrick

 

...my next question might be how to avoid the FOUC ;-)

 

 

See the Pen OJzQRBP by uploaded (@uploaded) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Patte welcome to the forums,

Thanks for the demo. 

This ended up being an interesting challenge for me that I could not easily solve. 

 

A few things to consider

  • With text split into lines it is going to need to be split differently for various screen widths.
  • If we use batch() the number of items to be animated is going to change as the screen width changes
  • Text that is split is going to need to be reverted and resplit every time a resize occurs
  • ScrollTriggers are going to need to be completely cleared out or rebuilt every time a resize occurs

I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out.

 

What I ended up doing was creating my own debounced resize event (only fires when resizing is finished, not while it occurs)  called killAll() which does the following:

  • reverts all the text
  • kills all the ScrollTriggers created from the batch()
  • calls the init() function which starts everything over again

 

See the Pen wvpmaez?editors=1111 by snorkltv (@snorkltv) on CodePen

 

it seems to hold up reasonably well in my limited tests.

 

Would definitely be interested to see if anyone or team @GreenSock members have a better solution 

 

 

  • Like 2
Link to comment
Share on other sites

8 minutes ago, Carl said:

Also for the mods: in this case is there any advantage or disadvantage to using batch over just looping through the lines and creating a load of ScrollTriggers? 

Thanks Carl, for the great help! 

I would not have come up with the solution myself. Works very well - I am of course very curious if the mods find something else. 

However, I get along very well with this. Thanks!

  • Like 1
Link to comment
Share on other sites

2 hours ago, Carl said:

I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out.

 

Did you try using ScrollTrigger.addEventListener instead of onRefresh, like maybe with refreshInit?

 

2 hours ago, Carl said:

Also for the mods: in this case is there any advantage or disadvantage to using batch over just looping through the lines and creating a load of ScrollTriggers? 

 

I guess it depends on the effect you're going for. I think batch looks good for grids and maybe pages with infinite scrolling, but I don't know about those lines of text. I'd probably try it using individual triggers just to see how they look.

 

Link to comment
Share on other sites

Yep, by default ScrollTrigger listens for 4 events and calls a .refresh() for each one: 

  • DOMContentLoaded
  • load
  • resize
  • visibilitychange

You're seeing the "DOMContentLoaded" and "load" ones. Why not only listen for "load" and skip "DOMContentLoaded"? Because the site might be loading large images/videos/whatever and we don't want all the pinning and other animations to just not work properly until that's all finished. The page should still function even before all the content is fully loaded. But the loading of all those assets can cause the document to reflow and things get repositioned, thus we should adjust the start/end trigger positions accordingly. 

 

You can alter which events it automatically calls .refresh() on with the autoRefreshEvents setting: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Does that clear things up? 

  • Like 1
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...