Jump to content


BezierPlugin | How to get/calculate values directly

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

Hey – is there a possibility to get a specific value from the BezierPlugin like this:

var bezier = BezierPlugin.bezierThrough([{x,y}], curviness, ...);
var value = bezier.getValue(progress) // progress is between 0 and 1

Best regards

Link to comment
Share on other sites

Put an object in a tween, and read the values that way...

var cursor = { x: 0, y: 0 };
var bezier = { values: [{x: 0, y: 0}, { x: 0, y: 100 }, { x: 100, y: 200 }]};
var tween = TweenLite.to(cursor, 1, { bezier: bezier, paused: true });
console.log("X: %s Y: %s", cursor.x, cursor.y);
  • Like 5
Link to comment
Share on other sites

Copy and paste it. You'll see. The console.log looks weird because it's formatted  :ugeek:

  • Like 1
Link to comment
Share on other sites



There goes them socks!

Link to comment
Share on other sites

Formatted console logs. Very nice :)


thank you for that hint to use TweenLite/Max to get the values i need.


In my case i want to keep the used codebase as small as possible, that is why i don't want to use TweenLite/Max. Maybe even the BezierPlugin is already to much. Actually i used TweenMax for animating tons of particles. On the iPhone 5 the frame rate drops down to 35FPS, but if i update all particles directly within a render-loop, frame rate increases up to 60FPS. But this was just a quick performance-test with a much simpler, linear transition.


So, there is not a direct access to calculate that values from a bezier-object?.

Link to comment
Share on other sites

Hello jash


If your animating particles and its dropping to 35FPS, make sure the CSS inline  transform property is using either translate3d() or matrix3d(). If it is not using any one of the two then that means your not telling the browser to animate those on their own rendering layer to use hardware acceleration. And to do that is easy, but it just means adding the right CSS properties and specific properties in your tweens to tell the browser to animate using the GPU to get smooth 60fps, along with other factors.


So in this case a reduced codepen demo example will be great to see what your tweens look like.




  • Like 2
Link to comment
Share on other sites

Yep, Blake is exactly right - just use a generic object with x/y properties and tap into those. 


As for performance, yeah, if you're just doing a simple render loop with a few calculations manually for thousands of particles, that'll probably always be faster than GSAP (unsurprisingly) even though GSAP is super optimized. But in general animating that way is a pain in the neck workflow-wise (sequencing, easing, etc.) and you lose a ton of the benefits of GSAP (lag smoothing, browsers inconsistency workarounds, random access, etc.). That's not to say it's "bad" to do stuff manually at all - sometimes it's smart (like massive quantities of particles). I'm just saying that a workhorse like GSAP with all of its capabilities can't be expected to compete performance-wise with a simple render loop for thousands of particles :) 


BezierPlugin isn't really built to be used apart from the core of GSAP, no. Could it be hacked to work that way? Sure, but it's not really something we support or want to promise future support for (a hack that works today might not work with a future update) so I kinda want to steer clear of offering hacks like that. 

  • Like 1
Link to comment
Share on other sites

Thank you for all your answers.


@Jonathan: currently i work with pixi.js (WebGL-Renderer). The drop of the frame rate belongs to the execution of JavaScript (CPU). Its not a render-issue (GPU). The frame rate drops, even with no particle displayed on stage.


@Jack: i know GSAP is super fast. On desktop- and current mobile-devices my app runs perfect with 60 frames per second. I just try to figure out to optimize the game on older mobile devices ;)


Finally i think, even a "pure" calculation of bezier-values, would seriously decrease the frames per second on older devices. I'll try to precompute all values ...


best regards

  • Like 1
Link to comment
Share on other sites

Are you using a particle container? I don't know what this comes out to on mobile, but on a desktop you can run a good 10,000 tweens inside a particle container and the CPU will be idle for well over 30-40% of the time.

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