loladae
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by loladae
-
-
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.
-
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.
See the Pen BaxmJVR by maxeneg-the-bold (@maxeneg-the-bold) on CodePen
D3 + Stagger and Svelte stagger on scroll
in GSAP
Posted
@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.