loladae

@Cassie I found a "gotcha" with the observable notebook replica in case you're interested in that. Because of d3.select (which I will be more careful about using), I had to change the code to this: gsap.set(svg.querySelectorAll('.box'), {scale: .001}) selecting the svg that I defined above. Someone explained the issue nicely here.

Yes this is very weird. It's not even working at all in the observable notebook with D3. I wonder like you if it has something to do with how D3 is manipulating the DOM and the synchronous-style notebook of observable. Maybe I need to try to use timeline?

That makes sense! But this codepen isn't working for some reason ?

Got it! In my previous iteration, that's what I did as well, but the expected behavior is to start out blank and have them appear one by one. However, even when I add .attr('transform', 'scale(' + 0 + ')') or another version and increase the scale to 1 in the GSAP code, they aren't appearing one by one. I am trying to have the svg start blank and then the waffles appear one after the other.

Hi @Cassie! Thanks for responding. It's looking really weird....not sure why the last rectangle in the row is stretched, but here is an updated codepen. https://codepen.io/maxeneg-the-bold/pen/BaxmJVR

Hello! I am a gsap n00b. I was somehow able to make this work using the svelte framework and custom paths, but when I brought it to vanilla javascript/D3 I wasn't able to get it to work. I am just trying to get the grid to stagger in. When I press "play" the rectangles just go in without the stagger. In terms of the svelte repo, I was also wondering how to get it to show up on scroll? Here's my try: https://svelte.dev/repl/283ef8c1eac04eef97f4c87ece6fe818?version=3.50.1 When I use a button and the animation code that is not currently in use, the animation works, but it goes on its own. Edited to switch out the observable notebook link for a codepen link.