Jump to content
Search Community

Positioning elements along a bezier curve?

green_machine test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

7 hours ago, fcdobbs said:

The modifiersPlugin works well for this.  I'm wondering if it's possible to achieve the same effect with less processing power by tweening the scale through fewer scale values along the bezier curve, instead of on every tick.

Either way, values are getting set on every tick...if modifiersPlugin is working well for you, why are you looking for other options? Are you under the impression that modifiersPlugin is slow? I guess it depends what calculations you're doing inside of it, but in my experience performance problems are almost never GSAP-related. Typically graphics rendering in the browser accounts for 90%+ of the load (often 99%+), so even if you somehow managed to make the JS perform 10x faster (extremely doubtful), the overall impact is negligible. 

 

7 hours ago, fcdobbs said:

I couldn't figure out how to determine at what position values the element will pass through the anchor points without measuring the length of the path between anchor point segments using drawSVG.

Are you talking about the helper function from the docs? 

 

I think you might be overcomplicating this. Why not just measure the direct distance between each point and translate those into overall progress values which you can plug into the path length? Like if you've got 3 points, you measure the distance between the first two, then the second two, and you add them together to find the total length. So if the first point is 10 pixels from the second point, and the 3rd point is 30 pixels away from the 2nd one, the total length is 40. So the first anchor is about 25% into the overall "curve" (even though we're measuring straight segments). 

 

Sure, it's more of an estimate but everything is estimates with Bezier curves anyway and your goal is to get an overall visual effect so nobody is gonna notice if the scale shifts at a spot that's 0.5% off of where the anchor is. You'd burn a lot of CPU cycles doing all that work you described (iterating over the entire length of the path in 0.001 increments) when your goal is actually to save CPU cycles. In some situations it's worth doing that to pay the price up front in order to save significant resources over the course of the animation but this doesn't seem like one of those cases to me. 

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