Jump to content
Search Community

bezier using percent instead of px ?

nep test
Moderator Tag

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

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

 

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.  

  • 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.
×
×
  • Create New...