loladae Posted September 25, 2022 Share Posted September 25, 2022 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 More sharing options...
Cassie Posted September 25, 2022 Share Posted September 25, 2022 Hi there! I'm finding that code editor very hard to understand. Would you mind tweaking this demo? See the Pen eb7daa441755078547436c7d7163d193?editors=0010 by GreenSock (@GreenSock) on CodePen You can press 'fork' on the bottom right and it'll make a version that you can save and post back here. ☺️ Thanks Link to comment Share on other sites More sharing options...
loladae Posted September 25, 2022 Author Share Posted September 25, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 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! 2 Link to comment Share on other sites More sharing options...
loladae Posted September 26, 2022 Author Share Posted September 26, 2022 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 More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 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 1 Link to comment Share on other sites More sharing options...
loladae Posted September 26, 2022 Author Share Posted September 26, 2022 That makes sense! But this codepen isn't working for some reason 🤔 Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 Yep - Looks like it's a rounding bug! You're totally right. 🐛 Bear with us Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 Mmm, nope. Seems fine without d3 in the mix See the Pen dyeJbyY?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
loladae Posted September 26, 2022 Author Share Posted September 26, 2022 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 More sharing options...
GreenSock Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 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 2 Link to comment Share on other sites More sharing options...
Cassie Posted September 26, 2022 Share Posted September 26, 2022 boop https://bugs.chromium.org/p/chromium/issues/detail?id=1368232 2 Link to comment Share on other sites More sharing options...
loladae Posted September 29, 2022 Author Share Posted September 29, 2022 @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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now