Search the Community
Showing results for tags 'snap'.
-
Hello everyone, i think this is more of a math related question i struggle finding a solution for. I have a slider that is draggable and stops at the different slides with a snap point. Now i want to tween a value from 0 to 1 while between the snap points. I need a way to calculate the progress to the next snap point, that means 0 if at one of the snap points and 1 if 1px in front of the next snap point, then back at 0 and again from the beginning. Is there some math magic ?that can give me this value? Thanks in advance.
-
Hi all, Recently I made this 3D cube and I can't seem to get the navigation to work properly: I used this example of Chris Gannon: https://codepen.io/GreenSock/pen/3ff3af968fb3356423998050b0ae1d42?editors=0010 to create the cube and interaction. Dragging works fine with snapping, but when you click on the navigation buttons while the cube is tweening, 90 degrees are added, so the cube isn't 'snapping' anymore and it look likes the cube hasn't turned all the way. I've added a check to prevent this, but still no luck. Is there a way to disable the click while the cube is tweening? Or should I use some sort of 'snap' to allow the cube to turn only by 90 degrees. Any help is very much appreciated!
-
Greetings, I'm fairly new to GSAP and I would like to know how to implement a snap method so that when the translate of the wrapper is between 0 and 20% it goes automatically to 20%, like a classic snap to a point. PS. a lot of the code has been forked from Sahil89 Thanks in advance for the help. - Gabriel
-
Hello all, I am new around here. I am having 2 issues currently. I am trying to make my draggable boxes snap to the center of my target box. Currently they are snapping way off. lol When a new draggable box is put on the target box, i need any other box currently on the target box to move back to its original position. Thank you for your help, I really appreciate it.
-
Hello, I created container and box. My snaps don't work but when i use liveSnap instead of snap. Then this work well but is only jump without animation. I read documentation but i don't understand this. How can i create snap with animation? Something like this https://greensock.com/draggable when checked button ( Snap end position to grid ). Thank you for answer. Sorry for my English.
-
I'm using ThrowPropsPlugin with no success on webpack, I Import TweenMax as import { TweenMax } from 'gsap' and import Draggable from 'gsap/Draggable' They work good, however when I try to use ThrowProps, I import it from the common-js folder of ShockinglyGreen as import 'app/vendor/ThrowPropsPlugin'; No errors, but it won't work either. Any help is much appreciated, thanks!
-
Hey, Been using GSAP for a while now, but I have a problem with the snap feature of ThrowPropsPlugin. I'm currently working on a project that includes pixi.js and I'm using GSAP to animate. since I'm using pixi and not regular html elements I decided to use ThrowProps directly and not draggable. here's a snippet: this.tween = ThrowPropsPlugin.to(this, { throwProps: { x: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x } return naturalStop } }, y: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x } return naturalStop } } }, onComplete: () => { delete this.tween } }, 1, 0, 0.4) that code is executed with the event pointerOut and "this" is the pixi object the problem I'm having is that in order to calculate the distance between the 2 objects I need to have both x and y in the end function.. the behaviour I'm trying to do is to snap to an object if the dragged object is close enough.. really need your help with this one, been struggling for a while now thanks in advance
-
I'm rotating an svg on mouseenter, and currently just reversing the rotation with .reverse(1) on mouseleave. What I'd like to do on mouseleave is to tween the rotation counter-clockwise back to the starting point -- i.e. rotation % 360 == 0. E.g. if rotation is 780 when mouseleave, it should rotate back to 720. I couldn't find a way to do this "natively", so I tried getting the current rotation of the svg when mouseleave event fires, but I can't seem to get this value. I read in the SVG-tips that Is there another way to get the current rotation or a simpler way to do this rotation snap?
-
I'm trying to make a looping Draggable that snaps and only moves one step at a time. The problem is that with throwProps switched on, the user can throw it more than one 'step' at a time, and with throwProps switched off it doesn't snap at all. I used this pen as a starting point: http://codepen.io/osublake/pen/ee107aeb54bdf4dca1084715d86b5e9c Here's where I've gotten to: http://codepen.io/lewisSME/pen/mWQoye Any help greatly appreciated.
-
Hello! See my pen here: http://codepen.io/llan/pen/NdwYJb I'm building a configurator, where certain elements can be drag-and-dropped into different slots. I have implemented the cloning mechanism mentioned here: https://greensock.com/forums/topic/10466-draggable-cloning-option/ This part of working fine. In addition, I want the new elements to snap to their respective slots. For this, I have used the code from: http://codepen.io/antpearson/pen/IaAfl Snapping works for the first element I drop onto a slot. For each additional element, though, snapping doesn't work. I suppose it has something to do with the JS code in line 45. I've been trying to figure this out, yet without success. I would really appreciate your help. Thanks! Laurent
-
I'm loading my SVG files into different elements on my website. I'm trying to animate it with TimelineMax and it's didn't animated. I think it's because SVGs loaded dynamically and TweenMax didn't see them. How to animate them with TweenMax?
-
Hi Friends, I'm hoping someone can help me to understand the behaviour I'm experiencing when trying to use svg masks dynamically. The codepen technically works as intended however the only way I can seem to get them to work is using the .fromTo() function and I imagine the .to() and .from() although I haven't tried them specifically. I am however wondering if I can preposition the svg out of it's mask with the mask property remaining intact and the mask remaining in place by using perhaps the .set() function although I can't seem to get that to work. Also using translate transforms doesn't seem to work. Any guidance is much appreciated, Adam
-
Hey all , I was doing a little experiment with Draggable and throwProps so the user could throw the draggable to a position and get a new panel from an info slider and I see a strange quirk in Internet Explorer. I'm using three snap positions [150,350,550] and then based on the index of the final snap position, I grab a new information panel to be shown, but IE sometimes ends on a number that is not in the snap array, but rather a lengthy decimal equivalent. I'll get 349.803101087 instead of 350. This results in my index query coming back as 0 so it flips back to panel 0. I see the problem and the fix is an easy Math.round(), but I found this odd and I'm curious if it was just Internet Explorer being its usual troublesome self or why exactly it won't consistently land on a whole number since it should be coming from the snap array. This is only happening in Explorer (FF and Chrome are fine) and not on every throw. I've put a console.log() in the code to show the final position so please watch that as you throw the draggable around. It might take a few attempts to produce the odd behavior. Again, easy fix - just more curious what causes it. Thanks.
-
Hi, I have written a toggle switch using draggable with the snap property set to the dimensions of the slider. For example: snap:[0,47] works just fine. But because I am developing for mobile I cannot use hardcoded dimensions. So, I have tried setting the snap after Draggable.create as follows: var drag0 = draggable[0]; drag0.snap = [drag0.minX, drag0.maxX]; But, this does not seem to work. Is there a way to make this work? P.S. This is my first code pen.
-
In the Codepen listed, I'm trying to tween a Snap.svg element with a dummy object. I first learned about this technique here: http://greensock.com/forums/topic/8604-snapsvg/ But... alas I have been unable to make it work. I'm not really sure why it's not working. For the record, I'm aware that Greensock has a Raphael plugin, but the project requirements commit me to using Snap.svg. I also just generally prefer Snap.svg and would LOVE to use my favorite tweening tool to make it work. I'm also aware that a forum user wrote a port for the Raphael plugin about a year ago... but there's been no recent activity on Github and I was unable to get it to work. Thanks for any and all help in advance!
-
Hi I'm using the Draggable Util to create a spinning wheel, and using the throwProps:true property. When I listen for the snap function, the endValue is being incremented for each spin of my wheel. Is there a way to reset this after each spin? Thanks Dan
-
Is it possible to have a draggable snap to exact co-ordinates rather than an array of x and y values? For example make it snap to {x:40,y:50} and {x:100,y:200} only? At the minute if I use snap:{x:[40,100], y:[50,200]} it will snap to all 4 combinations of these values.
-
First thanks to Jamie and Jack for answering a similar question. Turns out I was asking the wrong question What I'm failing to achieve is something very similar to the Draggable Spin demo... http://www.greensock.com/draggable My requirement has two differences: I need to snap to a bunch of degrees from an array that are not in even increments. For example [0, 88, 185, 268]. I need a callback so I can display information related to the "snapped" degree. You can think of this as the Wheel of Fortune with uneven distances between each pin. A few things to note: I tried supplying an array to the snap option, but once the dial turns more than one rotation, it comes whipping back like it's attached to a rubber band. In addition, I can't use a callback with this technique (I don't think). But the GreenSock Spin demo allows you to spin the dial around and around, and it smoothly lands on a "snap" degree. Thanks for any help!
-
I'm using the ThrowProps rotation code, except it doesn't quite work how I want it to. How would I get the AS3 ThrowProps Rotation Demo.fla code to snap to 90 degrees as in the Draggable js demo? http://www.greensock.com/draggable/ http://www.greensock.com/js/demo/throwprops/spin.html Need some AS3 code from the following .js code: var rotationSnap = 90 * (Math.PI / 180); //90 degrees described in radians (for snapping Draggable.create("#knob", {type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger) snap:function(endValue) { //this function gets called by ThrowPropsPlugin when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, we'll just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. Keep in mind that rotation values are always defined in radians, not degrees! return Math.round(endValue / rotationSnap) * rotationSnap;}});
-
Hi, There's a way to know the end value of the throwprops plugin before the the snap function triggers?. I have an array of points for the snap function and what I want to achieve is to snap the element being dragged by one point of the array at a time no matter what, because if the speed of the throw is high enough it could advance more than one. I've tried with some conditional logic onDragEnd, but snap gets called before, the only callback that triggers before is onDrag and this.endX is undefined at that time. What I have achieved is using some conditional logic inside onDrag to determine whether the drag is to the left or right and based on that tell throwprops to move the element to the next or previous point, but you lose the throw ability so to speak, because the smallest drag triggers the snapp, meanwhile with throwProps if the velocity is too small the element goes back to the original position the idea is to keep that feature too. I've setted up a codepen: http://codepen.io/rhernando/pen/hmjyA Best, Rodrigo.
-
Hello! Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap. Im creating a webapp with a navigation that I can throw Like the facebook app. Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting "Snap to grid" checked. You will see what happens. Any thoughts or solution? Thanks //Robert -
Hi Everyone! I have problem with figure out method to scroll snapping to the nearest point. I'm using Superscrollama. This is my testing site: http://arcadioenmadrid.es/scroll/2mojedemoFOLIO.html First DIV is pinned by superscrollama for 3000px after this it scrolling up and there will be second pinned DIV for next some pixels. I would like to make something snapping like on this site: http://www.kosmostumostow.pl So in my case if user stop scroll at <1500 after 1 second site should auto scroll to 0px if he stop on >=1500 site should scrolling to the next DIV. I tried various methods with setTimeout and it never works. Browser snap to for example point 0px and I can't scrolling or looping function till browser crash on it. Anyone could me help with this? I'll be grateful. Thanks! p.s. Maybe someone know why don't work trasition background to white on Chrome and on Firefox is okay?
