limbo Posted July 8, 2022 Share Posted July 8, 2022 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 More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 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! Link to comment Share on other sites More sharing options...
limbo Posted July 8, 2022 Author Share Posted July 8, 2022 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 More sharing options...
limbo Posted July 8, 2022 Author Share Posted July 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 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! 1 Link to comment Share on other sites More sharing options...
limbo Posted July 8, 2022 Author Share Posted July 8, 2022 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 More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 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 1 Link to comment Share on other sites More sharing options...
limbo Posted July 8, 2022 Author Share Posted July 8, 2022 That looks to be achieving a lot of what I need. Thank you. I'll work up a flex example and post back if I get to where I need it. Thanks Cassie 👌 1 Link to comment Share on other sites More sharing options...
limbo Posted July 13, 2022 Author Share Posted July 13, 2022 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 More sharing options...
Cassie Posted July 13, 2022 Share Posted July 13, 2022 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 More sharing options...
limbo Posted July 13, 2022 Author Share Posted July 13, 2022 Thanks for the super quick response Will do. I'll make another pen. Bit more complexity — I think it'll be a useful case for folk once it's cracked. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 13, 2022 Share Posted July 13, 2022 Thanks! Appreciated. ☺️ Link to comment Share on other sites More sharing options...
limbo Posted July 15, 2022 Author Share Posted July 15, 2022 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 More sharing options...
Cassie Posted July 15, 2022 Share Posted July 15, 2022 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 4 Link to comment Share on other sites More sharing options...
limbo Posted July 19, 2022 Author Share Posted July 19, 2022 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). 1 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