castlearg

[castlearg]

I'm attempting to use registerEffect to encapsulate several animations in one handy  function.

Specifically I am translating one element, tweening bg image of the same element, and translating several other background elements.

I'm having some trouble where the bg image part of this sometimes does not work.

 

Check in the codepen for one example. 

If you call the effect twice the bg image will only animate on one of them.

There's a few more nested timelines than needed but this mirrors the structure of my large project just in case there's a bug in there somewhere.

 

Any advice greatly appreciated!

See the Pen abvYreb?editors=1111 by castlearg (@castlearg) on CodePen

[OSUblake]

You can't add an animation instance more than once. It will run at the last add call. If you want to reuse it, have a function return a new instance. 

 

Also, you can use "steps(n)" for the ease.

 

const reddening = () => gsap
  .timeline()
  .to(ball1, {
    backgroundPosition: "100% 0",
    ease: `steps(${numStepsInCycle})`
  }).yoyo(true);

const registerMyEffect = () => {
  gsap.registerEffect({
    name: "myEffect",
    effect: (targets, config) => {
      const tl = gsap
        .timeline()
        .to(ball1, { x: `+=${config.distance}`, duration: config.duration })
        .add(reddening().repeat(config.duration), "<");
      //.duration(config.duration)
      return tl;
    },
    extendTimeline: true
  });
};

 

 

[castlearg]

Thanks so much for the quick reply.

That put me on the right track and worked for the codepen(now updated).

For some reason in my real project the bg tween was not resetting - I fixed it by explicitly setting as below after playing around with repeatRefresh and yoyo params.  There must still be some external forces working on my real project but it got me rolling for now!

 

const reddening = () =>
  gsap
    .timeline()

  .set(ball1, { backgroundPosition: "0% 0%" })

    .to(ball1, {
      backgroundPosition: "100% 0",
      ease: `steps(${numStepsInCycle})`
    })
    .yoyo(true);