Jump to content
GreenSock

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

Search the Community

Showing results for tags 'coordinates'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 11 results

  1. 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 need to set the transformOrigin separately as well as a -50 xPercent/yPercent. Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size). Sample code // Move the element along a path, rotating it along with the line gsap.to("#spaceship", { duration: 5, motionPath: { path: "#path", autoRotate: true, align: "#path", alignOrigin: [0.5, 0.5] // aligns the center of the target on the path } }); See the Pen MotionPath aligning with path demo by GreenSock (@GreenSock) on CodePen. See the MotionPathPlugin docs for details. New: getRelativeDistance() that transcends coordinate spaces Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page. See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the getRelativePosition() docs for details. New: convert coordinates between elements/contexts GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm: See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the convertCoordinates() docs for details. And more... GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.) Resources Full release notes on each release is on Github Full documentation In case you missed it: GSAP 3.1 highlights (previous release) Getting started with GSAP Learning resources Community forums Happy tweening!
  2. 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...
  3. 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.onload = function(){ // Scroll to X and Y position buttons // bullet points var logoBtn = document.getElementById("logo"); var section1Btn = document.getElementById("section1Btn"); var section2Btn = document.getElementById("section2Btn"); var section3Btn = document.getElementById("section3Btn"); var section4Btn = document.getElementById("section4Btn"); var section5Btn = document.getElementById("section5Btn"); var section6Btn = document.getElementById("section6Btn"); var section7Btn = document.getElementById("section7Btn"); // menu buttons var firstnav = document.getElementById("firstnav"); var secondnav = document.getElementById("secondnav"); var thirdnav = document.getElementById("thirdnav"); var fourthnav = document.getElementById("fourthnav"); var fifthnav = document.getElementById("fifthnav"); var sixthnav = document.getElementById("sixthnav"); var seventhnav = document.getElementById("seventhnav"); var firstdot = document.getElementById("firstdot"); var seconddot = document.getElementById("seconddot"); var thirddot = document.getElementById("thirddot"); var fourthdot = document.getElementById("fourthdot"); var fifthdot = document.getElementById("fifthdot"); var sixthdot = document.getElementById("sixthdot"); var seventhdot = document.getElementById("seventhdot"); // buttons on central spinning circle var firstcirclebtn = document.getElementById("invisible-btn1"); var secondcirclebtn = document.getElementById("invisible-btn2"); var thirdcirclebtn = document.getElementById("invisible-btn3"); var fourthcirclebtn = document.getElementById("invisible-btn4"); var fifthcirclebtn = document.getElementById("invisible-btn5"); var sixthcirclebtn = document.getElementById("invisible-btn6"); // Scroll to Bullets logoBtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // Scroll to Start div id on page load TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); // Scroll to Bullets section1Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section2Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seconddot", offsetY: $(window).innerHeight() / 2 - $('#seconddot').height() / 2, x:"#seconddot", offsetX: $(window).innerWidth() / 2 - $('#seconddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section3Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#thirddot", offsetY: $(window).innerHeight() / 2 - $('#thirddot').height() / 2, x:"#thirddot", offsetX: $(window).innerWidth() / 2 - $('#thirddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section4Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fourthdot", offsetY: $(window).innerHeight() / 2 - $('#fourthdot').height() / 2, x:"#fourthdot", offsetX: $(window).innerWidth() / 2 - $('#fourthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section5Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fifthdot", offsetY: $(window).innerHeight() / 2 - $('#fifthdot').height() / 2, x:"#fifthdot", offsetX: $(window).innerWidth() / 2 - $('#fifthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section6Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#sixthdot", offsetY: $(window).innerHeight() / 2 - $('#sixthdot').height() / 2, x:"#sixthdot", offsetX: $(window).innerWidth() / 2 - $('#sixthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section7Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seventhdot", offsetY: $(window).innerHeight() / 2 - $('#seventhdot').height() / 2, x:"#seventhdot", offsetX: $(window).innerWidth() / 2 - $('#seventhdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // menu nav // Scroll to Bullets firstnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".first-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.first-coordinate-2').height() / 2, x:".first-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.first-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-2').height() / 2, x:".second-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-2').height() / 2, x:".third-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-2').height() / 2, x:".fourth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-2').height() / 2, x:".fifth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-2').height() / 2, x:".sixth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; seventhnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-2').height() / 2, x:".seventh-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; firstcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-3').height() / 2, x:".second-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-3').height() / 2, x:".third-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-3').height() / 2, x:".fourth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-3').height() / 2, x:".fifth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-3').height() / 2, x:".sixth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-3').height() / 2, x:".seventh-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; }(jQuery); There are other jquery plugins I have used, so perhaps the conflict is from there? <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script> <!-- Bootstrap pre built stuff--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> The console shows no errors so its hard to debug. Any help would be greatly appreciated, it's the last obstacle of the project!
  4. 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.
  5. 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
  6. 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 events? Like first move, then change opacity and then repeat? Any help would be greatly appreciated. Thanks
  7. 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 used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible.
  8. 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!!!
  9. 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 now. The value presented appears to be not transformed. I would expect the the returned value to be similar to the one received in the step 3. Not getting the transformed value makes it difficult to insert elements into containers at a specific location. It is especially the case when one is working with a huge scrollable container with only a fraction of it area visible.
  10. 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.
  11. 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 used approach to translate that to a percentage-based coordinate system? Can TweenMax work with percents instead of fixed coordinates? The examples I've found seem to use multiple CSS definitions for multiple platform types -- although this seems like a real pain -- particularly if the coordinates don't need to be that precise. Or is a % based method inadvisable for some reason?
×