Search the Community

Hi, I have some trouble with my Observer. I used it to snap between 2 sections. I have a state for the open menu is isOpenedMenu and pass it to the navbar as props. But when I click many times it causes an error with the Observer. I'm going crazy over this because when stated in the navbar component it works normally. What's wrong with the Observer? Here is my codesanbox: Maximum call stack size exceeded by observer - CodeSandbox Please support me, Thank you so much

Hi guys, New to this forum and to GSAP, I wanted to combine the personalization of Webflow and the power of GSAP. I'm working on a project where on desktop there's a "complexe" layout. On mobile, I wanted to simplify the navigation by creating a horizontal scroll with 4 different screens. The idea is that after clicking on inputs and other elements, the scroll is automatically snapping to the next screen. Here's the idea: see file in attachment. Do you have any idea on how to achieve this? Thanks mates horizontal-scroll-gsap-mini.m4v

I’m still fiddling around with ScrollTrigger’s brand new normalizeScroll option. I tested it on CSS native Scroll Snap. Sadly it doesn’t play nice together and ends up in jumping directly to the scroll snap points without any visual scroll. I remember there was a bug with ScrollToPlugin and CSS Scroll Snap last year which got fixed. The fix was probably quite an easy task since the CSS Snap can be turned off while scrolling to the content. Is there any chance to get the normalization on native Scroll Snap, or is it required to move completely to GSAP snapping for that? It would be great to get a hint about the restriction in the docs to be aware of the limitation.

Hi there! I am really excited about the latest gsap updates and all the great functionality it comes with! So first of all: Thanks for the fantastic work on this! I tried to give the ScrollSmoother plugin a go in a project I am working on right now. The project has scrolltrigger snapping to snap to sections. When I now activate ScrollSmoother additionally, the snapping does not work correctly anymore. If I stop my scrolling between sections it starts jerking back and forth, and just occasionally snaps to the section eventually. I wonder, do I need to set this up differently, or is this something where ScrollTrigger and ScrollSmoother do not work together (yet)? For an example, see the included CodePen. Thanks a lot! Edit: I notice, the effect does not seem to be quite so bad on the little embedded CodePen iFrame. Maybe it gets worse the further the snap position is from its target position? To better observe the effect, maximize the window size on the CodePen sketch. Sometimes it keeps jerking back and forth endlessly.

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 }); .

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.

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