MohsenKBZ

thanks for help guys. eventually I went with creating 2 containers for parallax and animations

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

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

awesome! thanks for the quick fix ?

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 https://codepen.io/Mohsen-Khakbiz/pen/jOxOLPN?editors=0010 https://codepen.io/Mohsen-Khakbiz/pen/WNJNErV?editors=0010

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!

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?

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

I actually mentioned in my first post. 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

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 ?‍♂️ https://codepen.io/Mohsen-Khakbiz/pen/bGvPLMm?editors=0010

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

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

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

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

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 https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz 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