Jump to content


Stacking Splits

Recommended Posts

Hi everyone!


I'm trying to create a simple stacking, type-based animation, where 1/3 stacks on top of 2/3, measuring the respective height for each new section (see rendering) as it stacks.


Thanks as always! 





See the Pen 78c37a86792cc5e98099d1ee6b9cf452 by evryali (@evryali) on CodePen

Link to comment
Share on other sites

Hi @pietM. I read your post a few times and I'm still lost as to what you're asking, sorry.

Link to comment
Share on other sites

Thanks for getting back! 


In the example, there are three discrete splitText animations sequenced by a master timeline.


timeline 1: 1/3 

timeline 2: 2/3

timeline 3: 3/3


2/3 replaces 1/3.

3/3 replaces 2/3.

Then the whole timeline repeats.


Rather than fading each animation out, I'd like to stack them:

So, after 1/3 completes, the text block gets pushed up to make room for 2/3 and so on. 


Does that make sense??

Link to comment
Share on other sites

Maybe :) 🤷‍♂️


I'd probably just stack them all on top of each other at the bottom, and then when 1 is done, have it move up by the offsetHeight of 2. Once 2 is done, have that and 1 move up by the offsetHeight of 3. 

Link to comment
Share on other sites

Thanks, Jack! 


Okay, I have the splits sequenced (I think I was overthinking it), but now I'm trying to reset the heights to "0" after the master completes with an onComplete function. But it's not working. Have a look.


See the Pen bGvRwyY by evryali (@evryali) on CodePen


Thank you! 



Link to comment
Share on other sites

Mmm. I'm not quite sure what you're after here but I think you might be overcomplicating. Just position them all absolutely in the same place, then animate them with transforms.

 If you want to move something by it's own height you can use yPercent.

gsap.to('elem', {yPercent: 100})

As Jack suggested if you need the height of the next element you can grab it's offsetHeight (pseudo code, incomplete)

let elems = gsap.utils.toArray('.elems')

elems.forEach((el, index) => {
  // move by the next elems height
  tl.to(elem, {
    y: () => elems[index + 1],offsetHeight
  // move into place by it's own height
  tl.from(elems[index + 1], {
    yPercent: -100

Maybe this helps? 

  • Like 1
Link to comment
Share on other sites

Thank you @Cassie ! 
I'll work on it! For now, I realize I can reset with an "onRepeat" function, rather than "onComplete".

Thinking way too much over here.

Thanks again! 


Link to comment
Share on other sites



Well here's a working demo if you'd like to go a transform route instead

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

  • Like 2
Link to comment
Share on other sites

This is great, @Cassie! Thank you!

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.