[how to combine scrubbed and non-scrubbed]

thanks for help guys.

eventually I went with creating 2 containers for parallax and animations

 

 

[how to combine scrubbed and non-scrubbed]

@Rodrigo is there any other way to achieve it at all? 

[how to combine scrubbed and non-scrubbed]

hey there

 

is there any way to combine scrubbed and non-scrubbed animations so they play seamlessly?

the situation I have is pretty much like the codepen demo. 2 different animations coming from 2 different functions. animated properties can be different.

first one is for a parallax effect and the second one is for the inview animations

 

See the Pen KKrmZLj by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

[function based values in keyframes since gsap 3.9]

awesome! thanks for the quick fix 👊
 

[function based values in keyframes since gsap 3.9]

hey there. hope you're having a good day

 

I just noticed function based values not working as expected in keyframes. and as my investigations it's started since version 3.9 I guess

I made these 2 pens to show

first pen is on gsap 3.8.0

and the second one gsap 3.9.0. also the same results on 3.10.0 and 3.11.0

btw as far as I know and console.logged only a single element that's animating is passed to the function as third parameter, instead of the whole elemnts array 

See the Pen WNJNErV?editors=0010 by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

See the Pen jOxOLPN?editors=0010 by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

[How to control the child animations]

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!

[How to control the child animations]

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?

[How to control the child animations]

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

 

[How to control the child animations]

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 
 

[How to control the child animations]

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

[How to control the child animations]

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

[How to control the child animations]

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

[How to control the child animations]

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 

[How to control the child animations]

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

[Stacking Cards Overlap]

hi. hope you're having a good day

I actually done this before. so I'll add a minimal version of it here. please check this pen

See the Pen WNzBrdz by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

 

you needed the "endTrigger" to be set to the cards parent for pin.

I also changed the start, end and scale on cards tween

spacer and minScale variables are also there so you can tweak them as you need
and honestly I don't remember exactly why I used gsap.utils.distribute  

[Scrolltrigger function-based value for scrub]

yeah that's also possible with destroying previous instances and recreating.

thanks for explaining and suggestions

[Scrolltrigger function-based value for scrub]

we're developing a project where user can create a parallax effect in a live editor and be able to change all parameters. from parallax values e.g. x, y, rotation etc. to start and end points. and we wanted to add scrub as well.

or if you could suggest any other ways to do to get the same result as using scrub

[Scrolltrigger function-based value for scrub]

hey there.

is it possible to add function-based values for scrolltrigger scrub?

[gsap conflicting with Gravity Form wp plugin]

hey there.

this is my first topic here. so first of all thanks for such a great plugin.

 

here I'm using gravity form plugin. but when I check a checkbox I'm receiving this error

Uncaught TypeError: Cannot read property 'step' of null

 

I will appreciate any help

 

Regards

Mohsen

See the Pen by test (@test) on CodePen