Jump to content

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

Search the Community

Showing results for tags 'coordinates'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 12 results

  1. Hey there 👋 I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When th
  2. GreenSock

    GSAP 3.2 Released

    GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. New: "alignOrigin" for motion paths MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd n
  3. The pen shows a typical way of getting the x/y coordinates for a rotated element. I can use this, but wondering if there might be some hidden gem in GSAP that calculates these points already or, if there might be a faster way to get these values...
  4. Hi I am having a conflict I can't replicate. The solution works fine in the codepen( If you look at the codepen in IE10, the effect works perfectly (place div in center of viewport on click), but in my finished page, the scrollTo just goes all over the place and lands in a different position each time. It works fine in IE11 but not IE10 which is a requirement for my client. I tried matching the codepen function exactly to my production functions but the error still occurs. Here is a copy for your review that is condensed: window.
  5. Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.
  6. Dear GreenSocks: I created the attached compass and made it spinnable with TweenLite and Draggable. Now I'm stuck: The images on top of the compass need to be clickable (and lead to the same URL) no matter in which position the compass stops after the user rotates it. I have lost hair and sleep over this. Does anybody know if this even possible? (The compass the way it right now is ONE .png image and the little pictures on top are each mapped with coordinates.) Any help would be greatly appreciated. Even if the help is: Not possible with GreenSock. Thank you so much! ~Dagi
  7. Hi, I am brand new to SVG animation and need help. I have an svg of the USA and am trying to make arrows shoot out of NJ and to all other states. I have the arrows on the states and am using TweenMax.from($("#TX"), 3, {x:220,y:-150}); to make them animate to their final destination. My x and y coordinates are off. Is there an easier way than trial and error to get the precise coordinates of x and y for each arrow? My method of trying different coordinates and nudging them would take me hours to do for 50 states. Also, after they move I want to make them fadeout and then loop. HOw do I chain ev
  8. I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I u
  9. Hi tweeners! I'm sure this is an easy one due to the skill level of GreenSock members there are 3 svg's in the pen, the last svg (#dot) tweens morphSVG to the 2 svg (#brush), the thing is that it morphs and goes to another coordinates... way to far. How to morphSVG a multipath SVG (#brush) and stay in the same place. THX!!!
  10. Hi there, it must be something really simple but I can't find it in the docs: how does one get local coordinates of a specific point in an element after it has been transformed? For example, if user clicks on a div that has been rotated 45 degrees, how do I get the transformed coordinates of the mouse click in the div? Please have a look at this codepen: http://codepen.io/anon/pen/BoXpKB It works as this: Click on the top left corner of the box. Local coordinate values will appear in it. Rotate the box 90 degrees clockwise. Click the same corner, which should be top right
  11. Is it possible to start a tween from x, y coordinates? I want to animate a box into view from where the user clicks. Thanks.
  12. I'm just beginning to get my head wrapped around a project which involves porting some of my Flash applications (built with TweenMax) over to javascript. I'm trying to understand what the best practice is for translating a fixed-coordinate system (Flash) to a flexible / multiple-resolution environment. (HTML). My Flash applications all run at full screen, so in order to simply account for all mobile environments, I assume that one simply creates a "screen sized" DIV set at height/width 100%. But since TweenMax uses a numerical coordinate system, I'm wondering if there's a commonly u