Jump to content
Search Community

Search the Community

Showing results for tags 'coordinates'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 11 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 the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.
  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?
×
×
  • Create New...