catepillar

Hey Jack! Good catch on the event handler - I've also tried just using CSS transforms (as well as the translate3d version of your code), but GSAP seems to perform slightly better on Chrome! Is this my imagination? Does GSAP tweens do any optimizations with requestAnimationFrame? RE zero duration - The zero duration version seemed to mimic the "snappiness" that other canvas-based applications like Figma had. I'll try increasing it to .1s and see if it feels better or worse.

Hey GSAP forum - hope folks had a good 3 day weekend. I'm reviving a side project, and wanted to use GSAP to help achieve silky smooth 60FPS panning via the trackpad. I've gotten fairly close! Here's the code - https://codesandbox.io/s/affectionate-dawn-zq3u9?file=/src/App.js - and here's the full-screen output - https://zq3u9.csb.app/ (Trackpad likely required) I've been tinkering with the above code for the past two days, and have observed the following: - React is a bottleneck, things go much faster if no state changes or rerenders occur - Plugging in an external monitor turns GPU acceleration on for my Macbook and makes things flawless (I thought I was going crazy trying to figure this one out) - At least on my 2019 Macbook Pro, Safari is significantly smoother than Chrome - Smaller or reduced screen sizes are significantly smoother than larger screen sizes - "will-change: transform" seemed to bump Chrome performance significantly - Testing in Chrome's incognito mode seemed to bump performance a little (some React plugin is probably slowing things down) - Chrome's DevTools indicate that every pan performs within a frame (Here's the rough numbers... Javascript takes .50ms, Recalculate Style takes 5ms, Update Layer Tree takes .60s, and Composite Layers takes .10ms) - It's unclear to me if Chome's DevTools can accurately report when the speed drops below 60FPS... I'm doing a lot of look and feel testing with these experiments In all honesty, the performance already is quite good! But my inner Steve Jobs can't help but notice a little jaggedness on Chrome or less-powerful laptops... is there anything else I can do to squeeze out the last bit of perf here? Thx for looking!

Got it! http://codepen.io/makeitrein/pen/OVRraB Just needed to add a wrapper and animate width: 0. Still need to do some custom stuff for the dollar sign and the initial input, but it's at a workable point now.

Doh! Knew it was something obvious like that. Also, I just realized that the Blake's Codepen you linked a few days ago for me - http://codepen.io/osublake/pen/XJQKVX - might be perfect in this situation. Just need a wrapper that animates to width: 0. I'll see if I can get something going based off that.

Just downloaded Square's cash transfer app and was pleasantly surprised at the elegance of the UX/UI. I'd like to replicate their dynamically sized input text with GSAP. Here's the video of it I took in action: As you can see in my Codepen, I've got somewhat far, but still need some help on the animations. When I remove the last character, rather than a smooth transition, it's rather abrupt, my guess from the "text-align: center" not being animatable. Additionally, I've struggled to replicate the sliding up/sliding down animation of text, as seen in the video. Neither the "top" or "y" property seemed to have much of an effect on my text. If anyone has a recommendation or Codepen to suggest, it would be much appreciated. Thanks, Jordan

Thanks Carl, those Codepens are exactly what I needed as a basis for my project. I've got a few more questions, but I'll need to play around with the Codepens provided for a few days before I'm in a position to get some help from the forum. Gracias!

Lo GreenSock community, Just joined Club GreenSock today after realizing that ThrowProps is really, really cool. Few questions for you all - any help is appreciated. Question #1: Is it possible to get "overflow-x: scroll" working with Draggable objects? Question #2: Is there a way to use a negative overlap (-100) with hitTest? I'd like a radius of around 100px around the center box to pass the hitTest. Question #3: If the hitTest is successful, how can I make sure the Draggable image goes to the very center of the center box, rather than just staying where it is? I started playing around with Tweening to the center box's coordinates, but it seems like the x/y coordinates for draggable objects are based on their initial position, not their container. Here's the Codepen again: http://codepen.io/anon/pen/QbEBBB Thanks, Jordan