Jump to content
Search Community

Converting from SVG to Canvas: Some Struggles

SammyC123 test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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:
 

  1. 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.
     
  2. 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.
     
  3. 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

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);

 

  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

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!

  • Like 2
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.
×
×
  • Create New...