Jump to content
GreenSock

loladae

D3 + Stagger and Svelte stagger on scroll

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

See the Pen BaxmJVR by maxeneg-the-bold (@maxeneg-the-bold) on CodePen

Link to comment
Share on other sites

Thanks for that, much easier to debug!

See the Pen ZEoaVpr?editors=0011 by GreenSock (@GreenSock) on CodePen



So the issue here is that you're treating SVG like canvas. You only need to call draw() once - then the SVG DOM is created and you can use GSAP to manipulate the properties of those elements.

If you're working with pixels within a canvas element the pixels don't have properties, they're just pixel data, so whenever you adjust how that pixel data is drawn you have to explicitly tell the canvas to redraw differently. These boxes are DOM elements so they don't need to be redrawn on every tick.

Hope this helps!

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Heya! 

Probably best to keep all the transforms in GSAP and not mix up d3 and GSAP. A set should do what you're after -
 

gsap.set('.box', {scale: 0})


See the Pen BaxmXzj?editors=0111 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Yep - Looks like it's a rounding bug! You're totally right. 🐛 

 

Bear with us

 

Link to comment
Share on other sites

I'm completely stumped with this one. No idea why we can't see the boxes. I don't think it's a GSAP thing, it's working in the minimal demo. I think d3 is conflicting somewhere but can't work out how or why?

Weirdly scaling from 0.1 works - also if we scale from 0 and resize the browser you'll be able to see it the squares. 

 

If you scale from 0 and don't resize, you can't see the squares but they do scale up, they're just invisible, and not because of opacity or autoAlpha either - they're just not visible somehow....

 

Completely baffled. I've dug into the DOM and nothing looks amiss. Anyone else is welcome to jump in 🤷🏼‍♀️


See the Pen BaxmXzj?editors=0111 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Oh wild. Ok. So if all the elements in the <g> are collapsed then the browser just isn't rendering it at all. Browser quirk.

Yikes. If you put a test element in that's not collapsed it's ok, and if you don't use a containing group it's also ok.

 

See the Pen XWqVWmK?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

Yep, that is most definitely a browser rendering bug, totally unrelated to GSAP. The browser is probably trying to optimize performance by ignoring elements that it thinks it doesn't need to render, but the algorithm the browser is using is clearly flawed and not "waking up" when things change size. It thinks it can still ignore all that stuff (rendering-wise). 

 

Even if you put another element inside that <g> that isn't scale: 0 (thus it should be rendered), it seems from my tests that the element must actually be visible within the viewport in order for it to trigger that <g> to render any of its contents. So, for example, if you put a <rect x="-99999" y="-9999" width="1" height="1" fill="transparent"></rect> that won't work. 

 

It seems like you can force the browser to render again if you change a certain property on the parent <svg>, like if you set the rotation to 0.01 or something. I'm not saying you should do that - I'm just saying it seems to force the render. 

 

Another option: don't wrap the stuff in a <g>. 

 

I don't think this is directly related to D3 either. And it definitely has nothing to do with putting your GSAP animations into a timeline.

Link to comment
Share on other sites

Yeah, 100% a browser thing. Wild, never seen this before.

(css version for sanity checking)

I'll pop it over to Amelia BR  Only in Chrome, I'll do a bug report. Browsers huh. 🙄


See the Pen PoeEqYm by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

@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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×