bezier using percent instead of px ?

[nep]

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

[ZachSaucier]

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.

[OSUblake]

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.

[Diaco]

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.

[OSUblake]

Nice Diaco! Add in some more options like lodash has, and you'd have a really nice alternative that's synced with the ticker.

https://lodash.com/docs#debounce

[Diaco]

Thanks buddy , Done!

 

pls check out the Throttle version too : 

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

[OSUblake]

Awesome! These will be very useful.

[nep]

Thanks! 

[Brian Travers]

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.

 

ie.

<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 -->
		</svg>
  </svg>
</div>

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

[OSUblake]

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.