jh3y

Howdy y'all 🤙 I thought this was doable and could've sworn I'd done it somewhere before. But, what's the best way to update a Draggable type on the fly? I had assumed updating the `type` on the fly might work. But, it doesn't. I can update the bounds as expected. Can't remember if I need to do this with a proxy or something instead. const Dragger = Draggable.create('.drag', { type: 'x', allowContextMenu: true, bounds: { left: 0, right: 1000, }, onDrag: function (event) { // Update bounds and types based on drag distance if (this.x > 200) { this.type = 'x,y' this.vars.type = 'x,y' // Bounds update as expected this.applyBounds(document.body) } }, }) Thanks for your help in advance! 🖤 – Jhey ʕ•ᴥ<ʔ __UPDATE::__ Looks like in previous demos I've used a proxy drag with a trigger and hooked into the `x` or `y` value until a threshold is met. Then I would open up to using other values. But, would be nice to be able to update the `type` on the fly. Happy to close this one though 🤙

Thanks for sharing them @Shrug ¯\_(ツ)_/¯ ? Yeah, if I were doing a "Click to spin", I think I'd have already built it and moved on haha. But, the issue here was more about syncing with Draggable and Inertia. I want people to be able to grab and spin the wheel. It's an additional mechanic to the demo I'm presenting.

Thanks for the replies people! ? Sorry if I wasn't clear @Rodrigo, I had an idea about what I was going to do for the Draggable part. It was animating the little ticker part so it syncs up with the inertia of the wheel I hadn't attempted in my head yet ? @Cassiehas come in with an awesome starting point! ? That's pretty much there. I guess it'll just be a case of fiddling with the keyframes/timing of the ticker so I can almost scrub the ticking/clicking. It won't have to be super accurate for the demo I'm presenting. But, I'm always curious how close we can get with these things or what crafty techniques come out of exploring. – Jhey ＼ʕ •ᴥ•ʔ／

Hey y'all! ? I've tried digging around in the forums a bit for kinda what I'm looking for but some of the threads are pretty old and I'm wondering if there's maybe a newer/easier way to achieve this effect. What I'm looking to do is create a spinning wheel that will land on a section with maybe some bounce back. My first thoughts are GSAP Draggable with rotation type and inertia which will get me most of the way. But, it's that little ticker piece at the top. How would you think to approach that? And potentially have it push back when the acceleration is slowing down from the inertia? Is it purely a case of tapping into the callbacks and trying to work it out based on the state of the Draggable? And could you somehow sync a repeating animation of the ticker to sync with the acceleration of the Draggable? I'm just sort of putting it out there. I haven't sat down to properly put something together yet. Attached is a very rudimentary CodePen with Draggable and Inertia in place. But, these were the first ideas that came to mind for approaching it. And there may be a much cleverer way of achieving it. Thanks for all you're doing! – Jhey ʕ •ᴥ•ʔ

Update:: Got it working how I wanted ? https://codepen.io/jh3y/pen/PoyEGwE

You know what? I think that's all it needed, an `immediateRender` in the `fromTo`. Then you can change things however you like. I had my `immediateRender` in the wrong place d'uh ?‍♂️ Thanks Carl! ? A little further up in the code I log the loop times in an Array to use by counting the `index` so should be good on that part ? See if I can actually build the rest of the demo now ?

Hey y'all! ? Got an odd one. I could be missing something straightforward. But, in this pen, I'm animating a set of squares on a trail on a canvas. I want to create a seamless loop so I've constructed the timeline by looping over the squares three times and then tweening the `totalTime`. In the code, It currently tweens from `totalTime: 0` to `totalTime: 7` and the entire timeline is shown as expected. But, as soon as I tweak the `totalTime` values, mainly the starting value, it breaks the animation window that I'd expect to see ? Not sure if I'm missing something clear and obvious. But, the technique should work in this scenario I imagine. The looping code is at the bottom, try changing the initial `totalTime` to something like `1` and it doesn't show the `TRAIL` timeline window of `1` to `7`. Are my timings off? Or, do I perhaps need to do something different when working with plain Objects like this? Thanks in advance! – Jhey const TRAIL_LOOP = gsap.fromTo( TRAIL, { totalTime: 0 }, { totalTime: 7, repeat: -1, ease: 'none', duration: 6, } )

Howdy y'all! ? Had a comment on CSS Tricks today about the article for this technique: https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ Has something changed dramatically between versions to introduce these breaks? Or is there a property I need to update or add potentially? The other solution I could see is pinning the GSAP version in all the demos for that article to ~3.7.0 I think ?

Yeah, I _think_ we mean the same thing ? My terminology may be slightly off but I'm pretty sure we are on the same frequency there ✨ Thanks Jack! ✨ ʕ •ᴥ•ʔ／

Hey Jack ? Sorry – I've taken a couple of days off before starting a new role this coming week. That solution is super clear and I love it! It's a great spin on the article too for showing learning process and how we've got to this solution. Kinda like the "Meta GSAP" article (Which could totally be redone with Observer now, right? Awesome!) I really like this solution because of it's simplicity. If I were to put another element such as a custom drag handle, and use Draggable for that bound to the input like I had originally, it would update the value and the Inertia would be triggered too, right? I think that's correct. I may have not worded it right but I'm pretty sure that works too, haha. Can't wait to finish off the article! ＼ʕ •ᴥ•ʔ／ Thanks again for everything!

This makes perfect sense. I'll get that other demo fixed up to use the new API too ✨ Thanks! ＼ʕ •ᴥ•ʔ／

That was a seamless switch ?

And that won't be removed? Also, "that" demo could be converted to use this API? Rad! I'll share today.

This is great! And perfect timing ? And will be great for the article too! I could totally make this into an "Observe" demo. I'm assuming this is the tool that has been "renamed" from something else that I may have made a demo for? Thanks Jack! ? ＼ʕ •ᴥ•ʔ／

Oh wow. That is much smaller. And I like that wrapYoyo! TIL. The only issues I see here are: - I want to plug into the "collision" so I can play a noise and bump the input itself from left to right based on the velocity too. Can you detect when a wrap happens inside "onUpdate"? - If I click the track, it applies the velocity which I wouldn't necessarily want as I want that to only happen after a "drag". With this original demo, it has the "correct" behavior. But, it has the drawback of me trying to keep that element in sync with the slider thumb. I was thinking with the "Draggable" way, I'd be able to easily keep a "faux" thumb in place by updating it's position based on the input value. But, that isn't an important part here. Just something I was thinking of doing. Thanks for teaching me something new! Again! ? The best part being that I've kinda written an article using Draggable. But, it's kinda cool that I can steer it in a different direction. I love mentioning the forum powers! Jhey ʕ •ᴥ•ʔ