SammyC123 Posted November 2, 2021 Share Posted November 2, 2021 I'm trying to adapt a previous SVG demo... See the Pen PoKOPeX by JC5 (@JC5) on CodePen ...to canvas and running into what I believe are fairly basic / newbie issues (both structurally and GSAP-wise). Relevant code begins around line 125 in the demo down below. Questions: Why are the circles tweening back to the bottom? I'm using a gsap.set with overwrite: true so shouldn't that reposition them instantaneously? Likewise, if I change it to a gsap.to and give it a duration (e.g. 10 secs), it will respect that duration. But if I set the duration to 0, it still tweens it as if it were set to 1 second. When I resize the window with the ScrollTrigger enabled, it seems to mess with my debounced resize event. If I comment out the ScrollTrigger, the issue goes away. Is there something I should be doing to avoid this unexpected behavior? I'm sure I'll figure this one out but I thought I'd ask in case it was something simple. Finally, on a structural level, I'm unclear on how to incorporate a ScrollTrigger that updates particle velocity (or timeScale) into this. I don't want to create a new ScrollTrigger every time the draw() or move() method is called. So should I be doing that work inside the ScrollTrigger itself (in an onUpdate)? Or should I be passing ScrollTrigger values into the methods instead? Is there a preferred or recommended style? I've pored over Codepens and this forum but nothing really stands out to me as "obviously correct." I'm trying to emulate as much of Blake's style as possible, but he's a hard act to follow. See the Pen fdee216936f064fd655d510f15c5a46e by JC5 (@JC5) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted November 3, 2021 Solution Share Posted November 3, 2021 Hi Sammy, When converting SVG to canvas, it might be easier if you try to recreate the same structure you had. This should help point you in the right direction. See the Pen MWvrvvb by GreenSock (@GreenSock) on CodePen For more canvas help, check out this post and the links in it. 4 Link to comment Share on other sites More sharing options...
OSUblake Posted November 3, 2021 Share Posted November 3, 2021 16 hours ago, SammyC123 said: When I resize the window with the ScrollTrigger enabled, it seems to mess with my debounced resize event. If I comment out the ScrollTrigger, the issue goes away. Is there something I should be doing to avoid this unexpected behavior? I'm sure I'll figure this one out but I thought I'd ask in case it was something simple. ScrollTrigger's refresh is debounced, so you should tap into that. If you want the animation to be fluid on resize, you could position and animate using ratio's instead of absolute values. draw() { ... ctx.arc(this.x * vw, this.y * vh, this.radius, 0, TAO); } let newX = gsap.utils.random(0, 1); let newY = gsap.utils.random(0, 1); 1 Link to comment Share on other sites More sharing options...
SammyC123 Posted December 21, 2021 Author Share Posted December 21, 2021 Sorry to necro an old thread (it's been a busy few months), but I just wanted to say thank you. Due in no small part to your assistance, I was able to arrive at something highly satisfactory. And while I feel like there is an opportunity to do this with an entirely different technique and probably in a much more optimal manner, this certainly sufficed for my purposes. See the Pen 3a2354ff0fbf0e1d03d802a199d12d86 by JC5 (@JC5) on CodePen Every time I work with GSAP or come to these forums, I learn something new and exciting. So, I guess you should consider this a double thank you. I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine. Happy holidays! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted December 21, 2021 Share Posted December 21, 2021 Aw, that's so nice to hear, @SammyC123! Thanks for swinging by, sharing your solution as well as some kind words of encouragement for the forums squad. 🙌 Merry Christmas! 2 Link to comment Share on other sites More sharing options...
Cassie Posted December 21, 2021 Share Posted December 21, 2021 Happy holidays Sammy and thanks for popping back in! 🎅 2 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