[GSAP and useState doing weird things]

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. 

[motion blur with svg gaussianblur (tween only the x value)]

Also, updated an old pen that some might find useful. The x and y axis are independent.

 

See the Pen WZqBjV by osublake (@osublake) on CodePen

 

 

[motion blur with svg gaussianblur (tween only the x value)]

12 hours ago, ZachSaucier said:

You might be interested in the unofficial blur plugin. It doesn't use SVG blur, just the CSS blur filter:

 

There's no need for a plugin.

 

See the Pen da31f02cd85acb36eb91d0480afc3a73 by osublake (@osublake) on CodePen

 

 

 

 

[Clone draggable stickers and reapply location within SVG]

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;

 

 

[Clone draggable stickers and reapply location within SVG]

1 hour ago, Gingah said:

I get from "this.x" or "this.target.getBoundingClientRect().x"

 

Those values are not the same thing.

 

I would do something like this.

 

See the Pen 6ff00fecf1a1c34cfb4172b1a07bcb0a by osublake (@osublake) on CodePen

 

 

 

[Variable animation duration with fixed in/out ease duration]

Just a simple demonstration showing stuttering. The ticker is rotating the pink box and gsap is rotating the blue box.

 

See the Pen db04b8b225bd19707111649a66ef5a05 by osublake (@osublake) on CodePen

 

 

[Variable animation duration with fixed in/out ease duration]

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;
});

 

 

 

[Variable animation duration with fixed in/out ease duration]

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.

 

See the Pen 248a88b4ac2e45c726a9cfdd97c008d3 by osublake (@osublake) on CodePen

 

 

[Sticky cursor animation]

3 hours ago, sIREN said:

You can check his site out if it helps https://jmswrnr.com/

 

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.

 

 

 

[Sticky cursor animation]

Canvas arcTo.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo

 

See the Pen ecb22f667f7dea096d896440e0b5dd0a by osublake (@osublake) on CodePen

 

 

[Multiple Eventlistener]

Clicking once seems to work fine for me here.

See the Pen 1e03a0401ea9c76f1501c309c2adcf26 by osublake (@osublake) on CodePen

 

https://cdpn.io/osublake/debug/1e03a0401ea9c76f1501c309c2adcf26

 

[Advanced Listeners "ticker"]

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);
}

 

 

[Multiple Eventlistener]

"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.

 

[Advanced Listeners "ticker"]

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);

 

[Moving elements and lines]

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.

 

 

 

 

[Asynchronous Timeline callbacks setting on REACT]

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
  }
}

 

 

[Classic Tile Puzzle]

You might find some useful stuff in this thread.

 

 

I use a 2d array to keep track of where everything is in a grid.

 

See the Pen NrRJwm by osublake (@osublake) on CodePen

 

 

 

[More Formal Introduction]

On 4/9/2020 at 10:26 AM, Greg Stager said:

and am a veteran of the US Army and Iraq war.

 

Cool! Former Army here. I was a 13M, multiple launch rocket systems (MLRS), but the only deployment I ever did was stateside to the Marine Corps base in 29 Palms, California.

 

[Creating Boundaries]

snap will just "snap" it into a position. If you want to tween it into a position, then you would probably need to create a tween in the onDrag callback.

 

 

[Creating Boundaries]

Just now, Shrug ¯\_(ツ)_/¯ said:

GSAP code battles in every thread around here. 😄

 

Ha, yeah! A good thread would have like 3 or 4 people coming up with unique and better solutions.

 

[Creating Boundaries]

8 minutes ago, Shrug ¯\_(ツ)_/¯ said:

There is so much amazing stuff on this forum when you dig around for it (its worth digging). Sometimes I head back into pages 300 to 400+ and just read old posts, you can discover all kinds of awesome stuff laying around.  👍

 

It seems like the number of good/interesting questions has dried up lately, so most of my good posts are several years old. Nowadays most questions are about scrolling, which don't interest me.

 

[Creating Boundaries]

14 minutes ago, Greg Stager said:

I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true.

Perhaps I will play with that concept.

 

That might be a good enough solution. The only problem with that is that you might not be able to get objects butting up against each other. For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them.

 

If you can live with that, then go for it. And if you are using circles, then using circle collision detection will work better than Draggable's hit test.

 

See the Pen YXpdYN by osublake (@osublake) on CodePen

 

 

[Creating Boundaries]

Pretty sure I used the word "complicated" in both of those threads. 😉

[Using timeline progress() from a class method]

Hm. Sounds like you might need the @babel/plugin-proposal-class-properties plugin to get the class fields to work.

[Using timeline progress() from a class method]

It's a scope issue from your requestAnimationFrame calls.

 

Take your pick. I like using class fields for events.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields

 

// function as class field
class MyClass {
   
  update = () => {
    console.log(this.foo);
  }
  
  constructor() {
    this.foo = "FOO"
    
    requestAnimationFrame(this.update)
  }
}

// function inside constructor
class MyClass {
  
  constructor() {
    this.foo = "FOO"
    
    this.update = () => {
      console.log(this.foo);
    }
    
    requestAnimationFrame(this.update);
  }
}

// use a function to call it
class MyClass {
  
  constructor() {
    this.foo = "FOO"
    
    requestAnimationFrame(() => this.update())
  }
  
  update() {
    console.log(this.foo);
  }
}