MohsenKBZ Posted August 25, 2022 Share Posted August 25, 2022 hi. hope you're having a good day I have a parent container, and a child container. some boxes inside them first I'm adding an animation to all boxes. and then an animation to child boxes my question is, how I can make both work together? I need these child animation can be anywhere. start, middle or end or anywhere I need child animations to start when parent animations reach to it. and continue parent animations when child animations done if child animation have the same animated property as parent animation, I want the child animation to be applied. for example the scale animation in my codepen example need to work well with staggers. if staggering from center, I want to start the animation from child animations in my example See the Pen rNdgxLQ by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 25, 2022 Share Posted August 25, 2022 Hi there! This is quite the list of questions. It's always easier for people answering if you narrow it down a little. We're happy to help people understand GSAP but we don't have the resources to build out demos according to lists of requirements. It's also very hard to quickly read and parse a list like this. Maybe we can approach this one at a time? Quote I need child animations to start when parent animations reach to it. and continue parent animations when child animations done Could you just target the boxes as a whole? See the Pen ZExNOgo?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 25, 2022 Author Share Posted August 25, 2022 hi Cassie. thanks for fast reply no, can't animate the whole like this. basically what I need is having parent and child animations work together. just like they're one animation. but child animations can have different animated properties 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 25, 2022 Share Posted August 25, 2022 Gotcha. Ok we can do conditional logic inside tweens. That's probably what you're after? See the Pen ZExNOgo?editors=1011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 25, 2022 Author Share Posted August 25, 2022 well, the result is what I want to achieve. but unfortunately can't use this solution. parent and child have different timelines. something like the first demo I've sent here. so basically if animating a property on child boxes, I want it to apply that over parens animation on the same property. but still child animation timing to be in sync with its parent Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2022 Share Posted August 26, 2022 Yeah I'm lost sorry. If you want staggers, the route is to use a tween like this, or potentially to construct a timeline with staggered start point? 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2022 Share Posted August 26, 2022 Sounds to me that you'll need to loop around and add some custom logic to check if it's a child or not. (Same as I did in within the tween but broken out into more detail) 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 26, 2022 Author Share Posted August 26, 2022 yeah eventually I had to add the logic to merge parent and child keyframes. now I'm having trouble with staggers that I think having a main timeline on top of all can control that? just like the solution you mentioned. thanks for help. I'm trying it and will update here Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 28, 2022 Author Share Posted August 28, 2022 ok I ended up with animating each box separately. I have multiple animations/keyframes for each box. inner child elements have different animations with different timing. so to make staggering work, I had to use gsap.utils.distribute but I'm now stuck with making the timing work correctly. considering different durations, stagger and delays on top or inner elements any help with this is really appreciated. been working on this for days but couldn't find the solution 🤦♂️ See the Pen bGvPLMm?editors=0010 by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2022 Share Posted August 28, 2022 Hi there! Quote but I'm now stuck with making the timing work correctly. considering different durations, stagger and delays on top or inner elements I don't know what you would consider 'correct' to be - and I don't know what the different variables are that you plan on dealing with so this is quite hard to help with I'm afraid. Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 28, 2022 Author Share Posted August 28, 2022 I actually mentioned in my first post. Quote child animation can be anywhere. start, middle or end or anywhere I need child animations to start when parent animations reach to it. and continue parent animations when child animations done if child animation have the same animated property as parent animation, I want the child animation to be applied. for example the scale animation in my codepen example need to work well with staggers. if staggering from center, I want to start the animation from child animations in my example so in last codepen demo, animation should start from green boxes on top left. when it reached orange boxes, it should wait for their animations, 2 keyframes here in the example, and then continue with the rest of green boxes Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2022 Share Posted August 28, 2022 Ok, so in your example you're adding a stagger to each tween you're adding to the timeline. Each tween is just animating one box so that tween can't be staggered. Staggers are only for tweens that have multiple targets. You're looping around and building a timeline so you don't needs staggers here. I'm not really sure what you're doing with distribute, but let's strip it back a bit so it's a little more easy to parse, then we can build up from there. Here on each loop a couple of tweens for each element are being added to the timeline with a relative start. See the Pen dymBKoM?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2022 Share Posted August 28, 2022 I understand your end goal is to abstract this all out, but for now let's just try to keep it as simple as possible, lose the property objects and spread operators and all that - then it's easier for people to assist! 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 29, 2022 Author Share Posted August 29, 2022 Quote Ok, so in your example you're adding a stagger to each tween you're adding to the timeline. Each tween is just animating one box so that tween can't be staggered. Staggers are only for tweens that have multiple targets. You're looping around and building a timeline so you don't needs staggers here. I didn't use stagger on tweens. used distribute for that to get the stagger value for each tween and used as position parameter. the reason was because I couldn't animate all elements as a whole, because I wanted to be able to check if it's a child element or not. so if it's child element, using different animations and settings Quote Here on each loop a couple of tweens for each element are being added to the timeline with a relative start. now let's say we have different staggers for green and orange boxes. and orange boxes have a delay to start. animations start from top left, but when it reaches orange boxes, it'll wait for all it's keyframes to be done on them and then continue with the rest of green boxes. how to handle the timing for this? let me show you a simple version of the data I'm using to get animation values { /* options that all animations will inherit */ duration: 1, delay: 0, ease: 'power4.out', stagger: { from: 'start', each: 0.1 }, /* starting defining animations */ animations: [ { elements: '.box', /* options for .box animations */ options: {}, keyframes: [ { scale: 1.5, rotation: 45 }, { scale: 1, rotation: 0 } ] }, { elements: '.child-container .box', /* options for '.child-container .box' animations */ options: { duration: 2, ease: 'back.out', stagger: { from: 'edges', each: 0.05 } }, keyframes: [ { scale: 2 }, { scale: 1 } ] }, ] } Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2022 Share Posted August 29, 2022 Ah ok, I think I'm with you now. See the Pen jOzjRKa?editors=1010 by GreenSock (@GreenSock) on CodePen How about something like this, split it up into three groups with one tween each? Use defaults for inheritance 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 29, 2022 Author Share Posted August 29, 2022 thanks, Cassie. I think it's pretty much close. splitting to different packs is a good idea. but again problem starts when changing the stagger direction. for example when I change the default stagger direction to center, I expect the animation to start from somewhere near orange boxes, or from orange boxes, and spread in both green box packs at the same time. or when set to end, it should start be from the end of the second green pack. is there a solution to cover all these staggers and delays? Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 29, 2022 Solution Share Posted August 29, 2022 Well at the moment the tweens are added to the timeline in a certain order, you could change the order they're added to the timeline based on the stagger type. See the Pen qBozzBm?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted August 30, 2022 Author Share Posted August 30, 2022 thank you so much for you time and help, Cassie that was pretty much I needed. I was all wrong with my timing. I overcomplicated my code and had to rewrite from scratch thanks again! 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2022 Share Posted August 30, 2022 Glad we got there in the end! 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