Jump to content
GreenSock

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

Search the Community

Showing results for tags 'snapping'.

  • 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

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 3 results

  1. This is kind of a follow up to my response about Draggable being an excellent tool for handling different types of mouse and touch interactivity. https://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?p=68431 I would love to see Draggable expand out to support more types of interactivity, like with gestures. Development for Hammer.js has been on the decline for some time now, and there's not a lot of other options. Interact.js is probably the next best one. It's been around for awhile, and has all the bells and whistles, but it's not for beginners. For example, I thought the SVG demo on their site was kind of neat, so I created a version on CodePen. Check it out... http://codepen.io/osublake/pen/5008b47d7eff5ee86b30ba22cdbe4818?editors=0010 Hope you like working SVG matrices. That is definitely not something your average user would be able to figure out. With Draggable, this is all that's needed for the dragging. Draggable.create(handle, { onDrag: function() { point.x = this.x; point.y = this.y; } }); Pretty simple, right? http://codepen.io/osublake/pen/02f36f1d867ba61abff89536414f5982?editors=0010 But wait. Something's not right. It's not snapping to the points. Using the current API for Draggable, that's going to be really hard to do. I've brought up needing x/y values at the same time with the ModfiersPlugin, but Draggable really needs this. I want to build a node editor like this, with draggable nodes and port connectors. To see how xy snapping might work, I modified a line of code to pass in both values around line 1708. x = snapX({ x: x, y: y }); That's enough to hack a demo together. Check out the simple point in circle test I'm doing. Draggable needs something like that. Pass in an array of points with an optional threshold. http://codepen.io/osublake/pen/NdKvYb/?editors=0010 Now we're getting somewhere! But why stop there? It would be nice if Draggable could keep track of some additional properties, like the delta value between events. This would be crazy useful. Using the delta value, you can do stuff like move other objects alongside what you're dragging, or even mirror them, like a Bezier handle. Check it out. The only thing I'm doing is setting the x and y properties to the negative delta value. That moves it in the opposite direction. Now you can do trigonometry without trigonometry! http://codepen.io/osublake/pen/ggYxvp/?editors=0010 There's one other property that would be nice for Draggable to keep track of, and that's the last position. We already know how useful that is as that question gets asked a lot. Here's something interesting you can do using the last and delta values. Connect circles. It's done by finding the mid point, which is the average of the last and current position. The diameter of the circle is the magnitude/length of the delta The faster you drag, the larger the circles will be. It's almost like an event visualizer. http://codepen.io/osublake/pen/OWLjOy/?editors=0010 What do you think? Hopefully you won't have to chew on this for too long. Here's the draggable file I modified. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/draggable.js And these are the changes I made. Really simple stuff. Just enough to get my demos working. // LINE 1122 this.last = { x: 0, y: 0 }; this.delta = { x: 0, y: 0 }; // LINE 1232 self.last.y = applyObj.data.y; self.delta.y = y - applyObj.data.y; // LINE 1242 self.last.x = applyObj.data.x; self.delta.x = x - applyObj.data.x; // LINE 1738 x = snapX({ x: x, y: y }); .
  2. Is it possible to set snapping onDragEnd? I've tried... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = function(){ return 0; } } } and... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = [0]; } } but neither seems to work. I'm guessing this is because the snapping tween is created before this point, any ideas? Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.
  3. Hello, I've been fiddling with the greensock platform and plugins for a while and I'm impressed! Both - with the capabilities and the performance. I'm building a prototype of a fullscreen 2-way scroll system. A full window master - that scrolls and snaps horizontally. And with vertically scrolling elements inside. The goal is to get native scrolling full pages swipable up'n'down and side-to-side with snapping. Here's what i need help with: http://codepen.io/skorpa/pen/mvDfz Worked so far as intended - The vertical scroll cancels the parent horizontal scroll on onDragStart by passing endDrag to it, and vice versa, but only works with a mouse. With touch devices you can only control horizontal scroll. disable & enable doesent handle with touch eather and can leave elements frozen offset mid animation. Is there a way to implement this? Compromise is to use non native x, y scrolling and use keyboard or clickable buttons to move left-right I'm guessing.. And on a side note: Any good ideas how to implement horizontal snapping with native mouse / trackpad scrolling? Thinking - animate to the nearest snap point after a scroll event is fired Thanks in advance! Mikk
×