How to control the child animations

[MohsenKBZ]

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

[Cassie]

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

[MohsenKBZ]

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 

[Cassie]

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

[MohsenKBZ]

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

[Cassie]

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?
 

 

[Cassie]

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)

[MohsenKBZ]

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

[MohsenKBZ]

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

[Cassie]

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.

 

[MohsenKBZ]

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 
 

[Cassie]

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

[Cassie]

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!

[MohsenKBZ]

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 }
      ]
    },
  ]
}

 

[Cassie]

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

[MohsenKBZ]

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?

[Cassie]

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

 

 

[MohsenKBZ]

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!

[Cassie]

Glad we got there in the end!