Jump to content
Search Community

ScrollTriggger + SplitText + Timeline (+ batch?)

limbo test
Moderator Tag

Recommended Posts

Hello. I'm looking for some general advice / code best practice when setting up a page that uses Scrolltrigger + Splittext. The ideal would be to have a mix of splittext and other gsap targets that animate when scrolled into view - but also animated all items/text within viewport on first load

 

1. If in viewport, animate SplitText and/or objects after page load
2. Animate in as they become available - again, not too hard - using Scrolltrigger
3. Do it sequentially so first object/splittext, second object, third splittext etc etc - could be any order of items (which is where I'm stuck)

This pen outlines my issue (best viewed a bit larger than inline here) - the visible images/text all animate at the same time. I've crudely set up two timelines. Combining them with batch or stagger is where I'm hung up... So in short, what's the best way to combine Splittext and ScrollTriggger into the timeline of other Scroll-based animations?

See the Pen zYWrQoe by liamcrean (@liamcrean) on CodePen

Link to comment
Share on other sites

Hey there!

 

Thanks for being part of Club GreenSock. 🥳

You don't need a tween added to onToggle - that's kinda doubling up on your animation, you've got an animation tween being controlled on scroll and then you're adding an additional animation tween in the callback.

Maybe this is what you're after?

See the Pen zYWqpej?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the super quick reply Cassie. That toggle is just to make the animation simpler once splitText has run (should have removed before posting) + I knew I'd not explained my issue with enough clarity - or indeed made a clear example...

 

On a larger screen - the images and splittext animations (within viewport) occur simultaneously. I'm looking to run them in sequence (any below the viewport will naturally follow this pattern). I'm sure it'll be simple enough - where I need one timeline with batch, and splittext runs when in view...

Link to comment
Share on other sites

7 minutes ago, Cassie said:
gsap.from(img, {
  duration: 1,
  y: 100,
  opacity: 0,
  ease: "power4",
  scrub: 1,
}

Also you can't add scrub in a tween like this - it's a property of scrollTrigger. Hope this helps!

Yeah - that's a relic from tinkering. Removed.

  • Like 1
Link to comment
Share on other sites

Quote

On a larger screen - the images and splittext animations (within viewport) occur simultaneously. I'm looking to run them in sequence (any below the viewport will naturally follow this pattern). I'm sure it'll be simple enough - where I need one timeline with batch, and splittext runs when in view...

 

Oh ok. Yeah, then batch will be the right way to go here.

See the Pen NWGPxGZ by GreenSock (@GreenSock) on CodePen



I guess you'll have to create an array of items yourself so that they're in the right order. Then use batch on that array to animate them in.

 

I'm popping out to walk the dog - but I can take a little look when I'm back!

  • Like 1
Link to comment
Share on other sites

Thanks, yes exactly. It's the trouble I'm having. (We need to do same! So hot here it'll be a short wander with the pup later I think)

 

Feels like solving this will create a really nice reusable bit of code that answers a lot of UI questions when wanting to combine the timeline, scrolltrigger, batch and splittext. Which I think is a common use case — for me at least. Ta.

Link to comment
Share on other sites

Actually. Before I go!

Here's a starting point. You can just use a CSS selector to get the elements really.

The next step will be to find out what the elements are inside the batch function. I've logged them out, so you'll just need to run some conditional logic and then animate them in however you like.

See the Pen poLyaea?editors=1011 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @Cassie

 

Thanks again for your help.

 

Think I need to change tack a little as this route is limiting the fine control of splittext. Do you know if it's easy to run splittext as a function onEnter? So I could do something like:

 

single timeline for elements within the page - staggering the load

Scrolltrigger runs to animate any element in view

- calls splittext as a function onEnter

Rather than batching - which appears to be peformant for lots of elements of the same type but not ideal for a range of different elements added to the timeline.

 

Do you (or anyone else reading this) know of an example that might cover this approach - to get me on the right track. Thanks again.

Link to comment
Share on other sites

Hey again.

Could you expand on this a bit more.

I don't know what you mean by 'limiting the fine control of splittext' and 'appears to be peformant for lots of elements of the same type'.

 

Just explain what you're after visually and where this demo is falling short of that. Break it down into - what this demo isn't doing and what you want to do

Link to comment
Share on other sites

Just about got there (so close) then realised that of course some UI patterns wouldn't fit into the ideal...

 

See the Pen ZExpgNp?editors=0100 by liamcrean (@liamcrean) on CodePen

 

Note the first 3 columns of text under the first row of images - they animate before they're in-view. I used a parent wrapper to trigger events which seemed like a good approach. Any bright ideas how to solve it... maybe a class for each object I want to animate + one extra for scrolltrigger?

Link to comment
Share on other sites

I think maybe you were missing a little part of my last post- you can run conditional logic inside the batch 

 

On 7/8/2022 at 5:29 PM, Cassie said:

The next step will be to find out what the elements are inside the batch function. I've logged them out, so you'll just need to run some conditional logic and then animate them in however you like.


So you can handle how the animation happens for each element. Does this help?

See the Pen zYWoyyK?editors=1011 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Wow. Thanks Cassie. Didn't see this reply till now. That's really helpful thanks.

 

Let me try it and see if I can get everthing to stagger (Which is still an issue but seeing it done like this with conditionals definitely seems a good route).

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