OSUblake

Try this for now. I updated everything to v3 syntax. One problem is that those random movement tweens are recursive, so we need to kill them. https://codepen.io/osublake/pen/66b5031f646ca23c565fb693de35f132 @GreenSock I couldn't get killTweensOf to work. Can you take a look at that demo on line ~59. I had to manually kill the tweens.

By horizontal scrolling, I meant actual scrolling that can be done by the browser, so you can scroll horizontally with touch or a trackpad. That's just animating a container on the x axis. But what were you looking for gsap to implement in your example? And technically you can scroll horizontally with a mouse wheel by holding shift, but most people don't know that. Or with JavaScript. A quick and dirty example. Don't use this code. https://codepen.io/osublake/pen/b106a113c226a2c49813f9c0725c8681

I would put a copy of the green box behind the circle, and toggle the visibility of the front box when it goes above and below the box. Well that's how you would need to do it in svg as there is no z-index.

Yes, but how do you handle horizontal scrolling? I see on the scrollmagic site that horizontal scroll doesn't work with a mouse wheel. https://scrollmagic.io/examples/basic/going_horizontal.html What are desktop users supposed to do? Manually drag the scrollbar right? It's not too hard to get the mouse wheel to scroll a container horizontally, but a lot of people don't do that. ?‍♂️

It does, but I'm wondering why people do horizontal scrolling. Kind of a pain when you only have a mouse wheel that goes up and down.

I guess you came across a bug in my code. I fixed it. document.querySelector(`#${data.fromId}`).cloneNode(true);

Thanks. It's similar to what I did to create an online/real-time word game with draggable and firebase. Yeah, I have CodePen to automatically create private pens, and it won't let you fork private pens. I don't understand the logic behind that because it's just an inconvenience as you can still copy and paste the code.

? I probably wrote that wrong after looking at the localForage docs. This gives matching results. async onDragEnd() { await map.setItem(this.target.id, { src: this.target.getAttribute("href"), x: this.x, y: this.y }); const res = await map.getItem(this.target.id); console.log("\n"); console.log(res.x, res.y); console.log(this.x, this.y); }, But some positioning looks off when you reload, and there are some errors in the console.

I'm not sure what the problem is, but I did this as a sanity check before making that demo. onDragEnd: function () { window.map.setItem(this.target.getAttributeNS(null, "id"), { src: this.target.getAttributeNS("http://www.w3.org/1999/xlink", "href"), // x: this.target.getBoundingClientRect().x, // y: this.target.getBoundingClientRect().y x: this.x, y: this.y }); // *** THESE SHOULD MATCH *** map.getItem(this.target.id).then(res => { console.log("\n") console.log(res.x, res.y) console.log(this.x, this.y) }); } The values stored are not the same as the draggable, so there has to be a logic error somewhere, or a problem with localForage.

First, an animation/timeline/tween is not a state. Use a ref instead. A ref is just like using this in a class component. When you set state in hooks, you lose everything that wasn't saved in a ref/state. https://codesandbox.io/s/gsap-and-usestate-4prg6?file=/src/child1.js I think that is really confusing, which is why I prefer using classes for gsap animations.

Also, updated an old pen that some might find useful. The x and y axis are independent. https://codepen.io/osublake/pen/WZqBjV

There's no need for a plugin. https://codepen.io/osublake/pen/da31f02cd85acb36eb91d0480afc3a73

Also, you can reduce all this code const sticker = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); sticker.setAttributeNS(null, "height", "64"); sticker.setAttributeNS(null, "width", "64"); sticker.setAttributeNS("http://www.w3.org/1999/xlink", "href", path); sticker.setAttributeNS(null, "x", 64 * i + 16 + 8 * i); sticker.setAttributeNS(null, "y", "0"); sticker.setAttributeNS(null, "visibility", "visible"); sticker.classList.add("sticker"); sticker.dataset.type = `sticker-${i}`; parent.appendChild(sticker); using insertAdjacentHTML. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML parent.insertAdjacentHTML("beforeend", ` <image class="sticker" x="${64 * i + 16 + 8 * i}" y="0" height="64" width="64" href="${path}" data-type="sticker-${i}"></image> `); // if you need the element const element = parent.lastElementChild;

Those values are not the same thing. I would do something like this. https://codepen.io/osublake/pen/6ff00fecf1a1c34cfb4172b1a07bcb0a

Just a simple demonstration showing stuttering. The ticker is rotating the pink box and gsap is rotating the blue box. https://codepen.io/osublake/pen/db04b8b225bd19707111649a66ef5a05

gsap won't eliminate stuttering. You might even want to turn off lag smoothing for a game. ?‍♂️ But you can compensate for some lag in a ticker, like here. https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js app.ticker.add((delta) => { // use delta to create frame-independent transform container.rotation -= 0.01 * delta; });

I think your approach should be fine if that's your requirements for the fixed duration. The only suggestion I would make is to not make so many tweens, like in a keydown event, which constantly fires. You could just create one tween, and play/reverse it. https://codepen.io/osublake/pen/248a88b4ac2e45c726a9cfdd97c008d3

You can inspect the cursor to get an idea of what they did. It's made up of 4 different elements, and they are animating their position and border radius.

Canvas arcTo. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo https://codepen.io/osublake/pen/ecb22f667f7dea096d896440e0b5dd0a

Clicking once seems to work fine for me here. https://codepen.io/osublake/pen/1e03a0401ea9c76f1501c309c2adcf26 https://cdpn.io/osublake/debug/1e03a0401ea9c76f1501c309c2adcf26

When you do bind inline like that, you don't have a reference to the new function, so you can't remove it. That's just how it works, and isn't related to gsap. So you either need store the bound function. init():void{ this.boundCheck2 = this.check2.bind(this, body) gsap.ticker.add(this.boundCheck2); } protected check2($body): void { if ($body.x === 0 && $body.y === 0) { gsap.ticker.remove(this.boundCheck2); } } Or use a class field arrow function. check2 = () => { if (body.x === 0 && body.y === 0) { gsap.ticker.remove(this.check2); } } init():void{ gsap.ticker.add(this.check2); }

"touchstart click" isn't a valid name. That's like jQuery syntax. Only 1 name per event listener. clickableDots[i].addEventListener("touchstart", slideAnim); clickableDots[i].addEventListener("click", slideAnim); But I think you just need "click". It should work for touch too.

What does your code look like? If you do it just like this, you shouldn't have any problems. var onTick = myCallback.bind(myScope, "param1", "param2"); gsap.ticker.add(onTick); ... gsap.ticker.remove(onTick);

I've talked about that technique many times before, but nothing in depth. Basically, just use different animations for x and y. These are the ones I could find ATM.

For hooks, you should create your animations with useRef, like here. For your onReverseComplete, I'm not sure how to do that because it looks like you are capturing flagA and flagB values in a closure, which wouldn't update. My suggestion would be to use a class to work around that. onReverseComplete = () => { if (this.state.flagA) { // do A stuff here } if (this.state.flagB) { // do B stuff here } }