Controlling Canvas Rendering with ScrollTrigger

[SammyC123]

I have some circular text rendered to a canvas that I want to advance (or reverse) the direction of based on user scroll. In the demo provided, this is partly hooked up and working, but I'm pretty convinced that I'm going about this completely the wrong way, so I'd be grateful for some collective problem solving.

 

Issues that I could use help on:

 

1. Is my whole technique for accomplishing this relatively simple effect incorrect? If so, are there any relevant examples for how to go about doing something similar? I've scoured both Codepen and these forums and not come up with much.
    
2. How would I get the rotate animation to use easing for a smoother effect? Since the rendering is taking place in canvas, I can't exactly use GSAP for it, can I? I don't want to have to build out an entire easing system for the renderer.

 

Appreciate anyone taking the time to offer their wisdom.

 

 

See the Pen ExWePGM by codepenrequiredit (@codepenrequiredit) on CodePen

[GreenSock]

Yeah, there's definitely a much cleaner way to do this

 

I tried to leave as much of your code alone as I could but here are the key changes: 

1. Added a "rotation" property to your Text object which basically controls the angle at which it starts.
2. Now we can simply animate that "rotation" value and in an onUpdate, we do the clearRect() and then render() the text. The key with this kind of stuff is to focus on just getting an animation going FIRST, then once that's done, hook it up to the scroll. 
3. To get the easing effect, I set scrub: 1. You can tweak that number to whatever you want (it's the seconds it takes to catch up to the scroll position)
4. I put the <canvas> into a .container element that I use for the trigger, and then pin that. Consequently, it's super easy to control how long it stays there (how far the user must scroll) by altering the "end" value. I tweaked the CSS a bit too.
5. Instead of a timeline, I'm just using a simple tween that's animating the rotation 360 degrees. Plug in whatever value you want. In your original CodePen, there was no purpose to having a timeline at all. You can use a standalone ScrollTrigger, FYI. 

See the Pen zYZJKyy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

 

Happy tweening!

[SammyC123]

I knew I was doing something wrong on a fundamental and basic level! Turns out it was actually multiple things. 🙃

 

 Thanks, Jack! Every time one of you (team GSAP) posts, I end up learning more in 5 minutes than I do in weeks of self study and research. Know that your assistance is truly appreciated.

[GreenSock]

44 minutes ago, SammyC123 said:

 Thanks, Jack! Every time one of you (team GSAP) posts, I end up learning more in 5 minutes than I do in weeks of self study and research. Know that your assistance is truly appreciated.

Aw, that's really nice to hear. Sometimes it's hard to tell if all the effort is making a dent over the months/years, but posts like this are encouraging. 

 

Enjoy the tools, @SammyC123!