Jump to content


bezier using percent instead of px ?

Go to solution Solved by OSUblake,

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

How do I use bezier to go somewhere via x should be = % instead of px ?


**I have a responsive background where the image should also curve to the same target when scaled


I tried using  xPercent / yPercent which do not work in bezier 

TweenMax.to(document.getElementById("image"), 1, {
        bezier: {
          curviness: 1.5,
          values: [{
            x: 60,
            y: 50
          }, {
            x: 140,
            y: 0
          ease: Power2.easeInOut,
          rotation: 260
Link to comment
Share on other sites

Hey nep,


To use percents, you either have to use the format x: "60%" or use GSAP's xPercent. Just keep in mind that this is in terms of the element's size and not the parent's. If you're wanting to do it in terms of the parent, take a look at this post which uses a function to convert between percent and pixels because it'd be performance intensive to try and update the animation while it's running.

  • Like 3
Link to comment
Share on other sites

  • Solution

Somebody asked the same question not too long ago, but no better of an answer. You have to recalculate it on a resize. Here's a simple example. Debouncing the resize calls and restoring the progress of the animation on resize could make it better.

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

  • Like 5
Link to comment
Share on other sites

in addition to Blake's solution ,


you can use this little function to call functions at the Start / End of Events like Scrolling and Resizing , ... etc


See the Pen WrdbVY by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks buddy , Done! :)


pls check out the Throttle version too : 

See the Pen yewOgZ by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

Awesome! These will be very useful.

Link to comment
Share on other sites

  • 9 months later...

I found this post while I was trying to make percentages to work with an svg that I wanted to go across the screen.  


I don't know if this solution will work for you or if this is too hack-y, but I nested the svg within another svg that was responsive to entire window.  Then, when the svg scaled with the browser, the x and y coordinates were percentages.



<div id="wrapper"> <!-- wrapper  -->
  <svg id="svg-wrapper"  viewBox="0 0 100 100"> <!-- change viewbox to whatever proportions are  -->
		<svg id="svg-nested"> <!-- can be the image, div or whatever you need  -->
                    <!-- embed whatever your #image content was -->

So in the above example, the x and y coordinates you use will actually be percentages.  

  • Like 1
Link to comment
Share on other sites

I saw that trick not too long ago. It works as long as you don't mind drawing everything to that viewBox, which is rather tiny.

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.