garyw

Here's a CodePen that demonstrates the errors in the console. I managed to update Safari to 11 and the errors still appear. https://codepen.io/og-elmonty/pen/OJPYyNo

Yes, this CodePen works. Part of the issue is that we're including a PointerEvent polyfill (PEP.js). When I remove it, the dragging works, but I still get the error messages. The other part of the issue is probably that Safari needs to be updated.... which I cannot do on this particular machine (gotta love Apple...not).

Here is the code we are using to initialize a horizontal dragger: this.dragger = Draggable.create(this.thumb, { bounds: this.thumbContainer, cursor: 'pointer', type: 'x', zIndexBoost: false, onDrag: onDragHandler, callbackScope: this, liveSnap: { x: function(value) { return Math.round(value); } } })[0]; When we attempt to drag the item using OSX Safari 9.1.2, we get the following errors: Invalid property (4) K - gsap.min.js:10:826 * "touchAction" * "set to" * pan-y" * "Missing plugin? gsap.registerPlugin" This code works on all other browsers that we've tested.

Jack, you are a lifesaver. Thanks so much!

I am creating a drag & drop exercise. When the user is done dragging, the dragged object should automatically animate to its target. This works correctly in normal circumstances. However, when the parent container is scaled, the calculation for determining the target position does not work and the dragged object does not land correctly on the target. I thought it might be related to dragging using x and y, so I changed the code to use left and top. I still have the same issue. You can see the issue in the CodePen. The viewport container element automatically resizes to fit the browser window/frame. Note that I use a function called getDocumentRelativePosition (which can be seen in the CodePen) to determine the left and top values of elements, because in practice, the dragged object can be inside a different relative container than the target object. Any ideas?

There's something weird going on with that close button, as well. After the animation starts, it has a transform applied to it. If I remove the button, the entire animation works correctly.

Oh and yes, the starting Y value is also not getting set.

The user triggers the panel with a button. The panel should slide up from the bottom. It is normally hidden and in its proper place. When triggered, it needs to move down below the viewport, turn visible, then slide up. I have the starting Y value set to 100 here just for sake of demonstration. Please ignore the minor CC border glitches. They are left over from the production code. Again, this worked perfectly with GSAP v2.

That was intentional. The form is hidden by default and I want it to appear and then animate. My production code uses visibility:'inherit' rather than autoAlpha:1, but either one does not work with GSAP 3.

https://codepen.io/og-elmonty/pen/bGGyObM

I have an form that is animating onto the screen using visibility and y properties. It works correctly in GSAP v2. After implementing GSAP v3, the animation no longer works. The starting properties are not getting set. Is there something special about the <form> tag? It is a complex app, so I have not yet created a codepen... it will take some time.

I see in the update notes that callbackScope is still usable, but I do not see it anywhere in the documentation.

I have code that uses a className tween on repeat: TweenMax.to(buttons, PULSE_INTERVAL, {className:'-=pulse', ease:SteppedEase.ease.config(1), repeat:-1}); This toggles the "pulse" CSS class on and off. I know that the className tween is no longer supported. Is there a way to repeat a delayedCall in order to do this?

No problem. I was just confirming that I can continue to use it. Thanks!

I don't see clearProps listed in the v3 documentation. Does it still exist?

Yes, thank you very much!

I use killChildTweensOf in SPA web apps to make sure that all animations are terminated before swapping out a page. With GSAP 3, this method is gone. Is there a separate utility function that does this? I can't update to GSAP 3 without this function.

How can I clear z-index from a draggable after releasing it, so that new page elements don't appear beneath the draggable item?

If I use the css plugin to animate to a specified className, does that CSS class need to have all the browser prefixes in it? Or will TweenMax automatically apply them?

I dunno. Unless Greensock wants to support multiple codebases, I would be hesitant to be tied to a technology (ES6) not universally supported by all the browsers in the wild. It will be a long time before everyone in corporate-land gets over their love for IE.

Is there an easy way to use GSAP to stagger a series of delayedCalls to the same callback function, optionally passing different parameters each time (ala cycle)? Or do I need to create my own loop to do this one at a time?

I have been reading various threads here on doing a 3D card flip. Has anybody done this with a fallback method for IE and other browsers that don't support the necessary CSS properties? For example, maybe altering scaleX instead? Is there a way to detect the ability of a browser to support this, rather than detect a specific browser? I need to support IE 9 and up, as well as Chrome and iPad. Thanks!

In my experience, animated GIFs perform extremely poorly.

Why is allowNativeTouchScrolling not documented?

Setting allowNativeTouchScrolling to false with the new beta code did the trick! I would like to reiterate again that the only time I had trouble was when type='x'. Any other type worked fine.