geddski

Ah yeah that is better. Thanks !

I found a workaround in case anyone comes across this thread: I add my own mouseup/touchend event to the copy element, and call draggable.endDrag(originalEvent). Here's an updated example: https://codepen.io/geddski/pen/XWJwxEQ

I was able to reproduce it here: https://codepen.io/geddski/pen/LYEoJeg The onDragEnd event doesn't ever get called.

no problem I'll try to recreate it in a codepen.

I recently upgraded an app to gsap 3 and found that my Draggable instance never fires its onDragEnd event. The other events (onDragStart and onDrag) fire just fine. I tried onRelease event also and it doesn't fire either. I'm using React 16.12 and found another post about needing to use dragClickables: true option, but that didn't help. In case it's relevant, I'm using: this.draggable.startDrag(originalEvent); to initiate the dragging, as it's a dynamic element that I create rather than one the user touches. Any ideas?

Ahh the span wrapper worked, thank you! I updated the pen with the safe version, will keep it around for anyone else who runs into this. Thanks again!

I'm needing to display formatted code with SplitText. Currently it strips out all my spaces. I've tried things like adding a bunch of " " but those get removed as well. I tried the pre tag but no luck either. How do I make it honor spaces/formatting like the docs say it's supposed to? (Note: I also have to add br tags any time I want line breaks, assuming its the same problem)

I actually just figured out a workaround where I calculate the proximity to the bezier points onUpdate. Thanks though OSUblake!

I'd like to flip the object being animated right when it hits each point in the bezier animation. I'm aware of onUpdate but that fires every frame. Is there a way to know precisely when a bezier point is hit?

Aha! That worked. Thanks!

I'm trying to bring in the PixiPlugin with webpack (create-react-app setup). import { TweenMax, PixiPlugin } from "gsap"; console.log(PixiPlugin); // undefined Tried just using it anyway: TweenMax.to(this.ship, 1, { pixi: { scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60 } }); but it doesn't do anything. The old way does work however: TweenMax.to(this.ship, 1, { rotation: 60 * Math.PI / 180 }); How do you use PixiPlugin with webpack? It appears to be in the npm package...

LOL you guys are awesome. Yep setting max-width ahead of time did the trick! Thanks for the help!

Hey there! It looks like TweenMax isn't animating maxWidth correctly, it just sets it instantly instead of performing an animation. Bug?

I'm using the SplitText plugin and have run into so many issues. Here is the code I'm using: // split and animate the text const split = new SplitText(this.refs.message, { type: "chars, lines" }); //targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope TweenMax.staggerFrom(split.chars, 0.2, { autoAlpha: 0, scale: 3, delay: this.props.delay || .3, onComplete: () => { } }, 0.022, this.typingComplete.bind(this) ) 1. Performance is terrible, especially when anything else is happening on the page. 2. It frequently stops, then janks ahead several words in a very jarring way. 3. It sometimes orphans single letters onto the next line 4. It causes horizontal scrollbars when they're not needed Anything I can do to solve these issues?

I guess it certainly could be a bug in the chrome dev tools. It does seem strange (impossible?) for two RAF triggers in one frame. I'll create an issue for them with this example to be sure, and report back here once they've investigated. Thanks!