Jump to content

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

Search the Community

Showing results for tags 'snap'.

  • 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



  1. Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of
  2. Hi, Can anyone help me with the code that I have? The issue that I'm facing is that when i try to snap a container using the following syntax, the animation seems to skip. { x: "+=" + 200, modifiers: { x: function (x, target) { x = gsap.utils.snap(200, parseInt(x)); return x + "px"; } } } I also used the snap plugin to snap the container into place however, the issue still persisted in this case too. { x: "-=" + 200, snap: { x: 200 } } Any help would be greatly appreciated.
  3. Hi, This is my first post here and I'm a fresh member of the BusinessGreen Club. I've just set to create a visual editor for creating multi zone (div) content for digital signage and GSAP seem to have the perfect set of tools for that. I have used the example from the forum post below to get me started. This will move into our Angular app eventually and the divs will be angular components that the end user can drag in from a library of contents. So for my question, I'd like to be able to snap the divs edges and perhaps even corners/vertices to each other. I f
  4. Howdy Seniors, I've created an horizontal slider with vertical scroll as shown in this pen: https://codepen.io/GreenSock/pen/XWmEoNg?editors=0010 Issue: Snapping is not clean, and the middle slide (.des2) is moving slightly to the right. Please tell me what I am doing wrong in this code. Thanks, and a wonderful plugin and even greater support.
  5. I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red squ
  6. Wussup, GSAP! I`m experiencing some issues with snapping. My snap performs very laggy fo no reson. Here is my ST code: Here is an example of this snap performing at chrome mobile- And this is how it performs on my desktop (Yet another Russian local browser (chromium)). I have the same experience on different browsers including Chrome itself.- I`d like to say that my code is buggy, but all actual codeOpen demo examples of ScrollTrigger`s snap (from docs) are laggy on my desktop too. I briefly looked for latest snap related topics and
  7. Hi guys, Congratulations on ScrollTrigger. I'm afraid I haven't used GSAP for several years (since my flash days!), but I'm enjoying getting back into it... This could totally be a 'me' thing, but I expected the `snap` property to affect the animation only, without affecting the scroll position of the page (the demos cleared this up, but it's not entirely obvious from the documentation). My use-case is simple, and possibly quite common... I am only animating a small element which scrolls normally with the page at all times. I have a timel
  8. Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: https://codepen.io/team/pixelart/pen/mdVbobo In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused
  9. 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.
  10. 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 t
  11. 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
  12. 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.
  13. SimonDucak

    Draggable snap

    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.
  14. 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
  15. HatakeK

    Snap rotation

    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 w
  16. 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!
  17. 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.
  18. 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 i
  19. 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?
  20. 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
  21. 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 th
  22. 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.
  23. 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
  24. 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
  25. I'm trying to build a slide-out menu in an app that runs within an SVG tag and everything works except the grid snapping. Codepen I've tried using console.log(endValue) where the Codepen says alert() but it doesn't seem to get triggered. I was thinking that maybe snap was a feature inherited by the ThrowPropsPlugin (not using that) but I wasn't sure. The idea is that the menu element (#testE) can slide halfway out of screen OR fully visible.