14136_1494126593

Thank you for the solution, you are right, it is pretty simple... once you know it

I would like the background image to fade in in 1 second, but scale for 10 seconds. How can I define separate durations for scale and opacity for the same element? Here is a minimal demo: https://codepen.io/planetgrafix/pen/dyaXLje?editors=0010

Thank you for the amazing support!

Thank you! That's very helpful, it made me understand better how defining the trigger works! I appreciate your support. Thanks for pointing out that it wasn't the latest version of GSAP. I just added the one that came by default in Codepen - looks like they are linking to an older version. EDIT: I just checked closer and unfortunately there is still an issue. As I scroll down, the boxes that are outside the group disappear as soon as the ones inside group start to appear.

Thanks Jack for the super quick solution! Amazing! There is only one problem... it works properly if the box-group is wide enough to fit all 8 items, but as soon as the viewport is narrower and some of the items wrap to a second line , then the order of appearance is not correct.

I have a simple demo with a few elements that are inside a grid and currently they all appear at the same time. I would like the boxes inside the box-group animate in one by one. I tried adding "stagger: 0.5", but obviously it's not working. What is the proper way to do this? https://codepen.io/planetgrafix/pen/OJdywRa