Register Effects

[_LAB_]

Hi everyone, I've got a very specific use case where I'd like to extend the timeline for my team's convenience (and for code clarity). 

We are using Phaser 2 and would like to "add sounds" to the gsap timeline.  That is we create a tween with the sound's duration and add that to the timeline.

I had achieved this by creating an effect aptly named addSound and extending the timeline for the effect so it's nice and convenient for us to use.  It all works flawlessly if we use sound objects as the target (see the example below)

gsap.timeline()
  .addSound(someSoundObject)
  .to(someFancySprite, { y: 100, duration: 0.5, ease: 'none'} )

However sometimes we use sound keys as strings instead of objects. (see code snippet below)
 

gsap.timeline()
  .addSound('someSoundKey')
  .to(someFancySprite, { y: 100, duration: 0.5, ease: 'none'} )

Now the effect will see the string and search the cache for any sound objects matching that key and use that instead.

Problem is that whenever we use strings as the target, GSAP will assume that is a DOM element.  No problem, so I examine the source code and discover that the toArray method has a mysterious parameter called leaveStrings.  Currently there's no way we can utilise that flag so that it will not use the document.querySelectorAll method.

So my question is, is it possible to use the leaveStrings flag at all just for the effect I'm using so that it will know that any strings as the target is NOT a DOM element?

I'd like to use strings purely for convenience so that the team will have flexibility of using objects OR strings when using the effect.  In the past we did use convenience functions that would return a tween (something like the code snippet below) but compared to using the addSound effect it seems clunky.

 

gsap.timeline()
 .add(createSoundTween('somekey'))
 .to(someFancySprite, { y: 100, duration: 0.5, ease: 'none'})

 

[Rodrigo]

Hi @_LAB_ and welcome to the GreenSock forums!

 

Yeah that's a bit of a tricky situation.

 

The only thing I can think of is to add a sound property to the config object, then run your own custom logic in the register effect callback and based on that create the GSAP instance:

const foo = {
  a: {bar: 0},
  b: {bar: 0},
  c: {bar: 0},
};

gsap.registerEffect({
  name: "test",
  effect: (targets, config) => {
    const sound = config.sound
    if (sound) {
      _targets = targets[0][sound]
    }
    return gsap.to(_targets || targets, {duration: config.duration, bar: 10});
  },
  extendTimeline: true,
});

const tl = gsap.timeline({
  onUpdate: () => console.log(foo.a, foo.b),
})
.test(foo, { duration: 0.2, sound: "a" })
.test(foo, { duration: 0.2, sound: "b" });

It could not be the best or safest approach but is the only one I can think of off-the-bat.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, the only other way I can think of right now is to modify the prototype yourself, basically circumventing the effect so you can handle it in your own custom way:

See the Pen rNQzVZL?editors=0010 by GreenSock (@GreenSock) on CodePen

[_LAB_]

Thanks for taking the time to reply with your suggestions @Rodrigo & Jack, I think hijacking the prototype is the way to go since that is what happens when you add a new effect. 

I did think of the prototype method but wasn't sure I was getting the right reference to get it all working.  I'll give gsap.core.Timeline.prototype a go and hope that is the right prototype reference.

Finally, thanks for creating such an amazing tweening library, over the years it has become such an indispensable tool for us to use.