pietM Posted July 21, 2022 Share Posted July 21, 2022 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 More sharing options...
GreenSock Posted July 21, 2022 Share Posted July 21, 2022 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 More sharing options...
pietM Posted July 21, 2022 Author Share Posted July 21, 2022 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 More sharing options...
GreenSock Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
pietM Posted July 22, 2022 Author Share Posted July 22, 2022 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 More sharing options...
Cassie Posted July 22, 2022 Share Posted July 22, 2022 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? 1 Link to comment Share on other sites More sharing options...
pietM Posted July 22, 2022 Author Share Posted July 22, 2022 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! M Link to comment Share on other sites More sharing options...
Cassie Posted July 22, 2022 Share Posted July 22, 2022 Ok! 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 2 Link to comment Share on other sites More sharing options...
pietM Posted July 22, 2022 Author Share Posted July 22, 2022 This is great, @Cassie! Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now