Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
donatopellegrino

problem width tweenmax and svg images

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

Hi guys i realized this simple animation width an svg image;

the square on the top moves automatically and the one on bottom moves right or left depending on what of the two arrows of the keyboard is pushed.

The problem is that i need to stop the moving of the second square when it's in proximity of the margins of the window.

How can i do?

Thank you in advance.

(everything is in the codepen)

See the Pen MaWWXd by Pellegrino (@Pellegrino) on CodePen

Link to comment
Share on other sites

  • Solution

You need to define what you mean by proximity? That could mean a lot of different things.

 

This might help you get started. Note that it doesn't take into account any viewBox on the SVG or screen resizing.

 

See the Pen pjoJge by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

sorry can you tell me where are the docs about the functions you used?

i can't find them

Link to comment
Share on other sites

Some of them are just native JavaScript methods, like getBoundingClientRect() which returns a rectangle with the top, left, right, bottom, height, and width of an element. Math.min is also a regular JavaScript function.

 

That _gsTransform thing might be confusing, but it's an object GSAP places on the element with all the current transforms like x, y, rotation, scale, etc. The _gsTransform object is on the actual element and not on the jQuery instance, so I used $("#myElement")[0] to get the actual element from the jQuery object. Also, the _gsTransform object is not available until a transform is applied to element, so that is why I initially set the x value on the hero to 0. 

 

Open up the console to see some stuff I'm logging out. Maybe that will help explain some things.

 

See the Pen pjoJge by osublake (@osublake) on CodePen

 

 

 

 

 

 

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