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. Hello, I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent. The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread. Thanks
  2. Hi y'all! I've been trying for a few days to get my sections working horizontally and vertically (https://codepen.io/EricCV/pen/wvPQXKB?editors=0010) with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything😓 I only make it work in one direction, not both (https://codepen.io/EricCV/pen/JjOeZPL?editors=0010) Another option could be to do it in this way (https://codepen.io/EricCV/pen/dyZQKKE) but snapping the slides Any idea to try something? I'm stuck and I need some push I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated... Also any feedback to improve my gsap code would be perfect Many thanks
  3. I'm very new to GSAP and I tried to follow a tutorial and some demos however I couldn't get the results I wanted. I wanted as the user scrolls down for '.container' to be pin when it hits the top of the screen. So I set start to "top top". And when the user scrolls to the '.container' for the first '.panel' to already be displayed. I believe that part is working as I wanted. When '.container' is pinned, as the user scrolls, for each ".panel" moves into view and snaps into place. I think this works correct. However, It's not working the way I want it to look. I want the text inside '.panel" to be displayed in the center of screen / '.container'. But the only way I could get this scroll effect to work was to make the height of '.container' greater than 100% like 600vh. Oh and because I made it 600vh. There's extra whitespace at bottom. And I want to make sure everything is dynamic as possible. I also want it to snap to be more smooth or instant. There's a bounce there that I don't know what is causing it. How can I fix these problems. Is there a better way for me to set up animations.
  4. So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function. I don't know why, I also don't get any errors. let rotationSnap = 90; Draggable.create(vinyl, { type:"rotation", OnDrag: () => console.log('works'), snap: function(endValue) { console.log(endValue); console.log(Math.round(endValue / rotationSnap) * rotationSnap) //this function gets called 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, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. return Math.round(endValue / rotationSnap) * rotationSnap; } }) }
  5. Hi everyone, I have a question here, is there any possible way to start the snap at the end of a section (not at the start of a section)? Because as you guys can see in the codepen, it scroll the whole section until end of section. So there's no chance for the user to read the text in each section. Not sure if my code isn't implemented correctly. What I am going to achieve is, the user still should be able to control the scroll in order for them to read the text. Here's a visual reference for you guys in the attachment, hope it helps. Thank you! *in this pen, I use Scrolltrigger with smooth scrollbar
  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 found this post. https://greensock.com/forums/topic/25479-full-screen-sections/?do=findComment&comment=123493 So @akapowl, you might be interested too. Your demos, where you downgraded ScrollTrigger and GSAP to v3.4.2, works perfectly fine with snapping. Any other machines I tested works good. Is there a possibility it`s related to AMD processor I`m using? Or may be it`s Windows Insider program? Dunno. Any ideas what kind of information about my system could help with solving this issue. P.S. Have no idea, how to mention concrete person at this forum correctly(
  7. 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.
  8. 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 the section. I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward. Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well. Thanks in advance. Cheers Murray
  9. 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.
  10. 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 found the hitTest method but all examples I can find where snapping is involved is on centering a div on top of another "drop zone" div. Grateful for any help.
  11. 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.
  12. 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 square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
  13. 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 timeline with an 'in' and an 'out' animation, to show and hide the object while the page scrolls. I want the animation to snap to [0, 0.5, 1] – so the beginning, middle and end of the timeline, depending on the scroll position. However, snapping scrolls the page – which I absolutely do not want. This would make sense if I had set `scrub:true` (or any other value), but I think the only way for me to achieve 'in' and 'out' animations like this, is to split them into two separate scroll triggers – and then I'm worried they could interfere with each other. Does that make sense? I guess my non-breaking change request would be to add a property to the snap parameters to achieve this? Of course, I may have totally missed something... Cheers, Steve
  14. 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 by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein
  15. See the Pen Draggable "Toss" Demo (4col) by GreenSock (@GreenSock) on CodePen. See many of Draggables properties in action including bounds, liveSnap, snap, edgeResistance and more. This demo is a great starting point to get familiar with Draggable and ThrowProps plugin. Fork, edit and enjoy! Be sure to read the [docs id="js.Draggable" linktext="Draggable Documentation"].
  16. 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.
  17. 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!
  18. 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
  19. 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.
  20. 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.
  21. 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!
  22. 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
  23. 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 way to do this rotation snap?
  24. 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.
  25. 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