Animating ellipses inside SVG, the bounding box is visible

[Marcello]

Hello,

I have an svg with 2 ellipses that I want to animate using React to be used as a page background; I'm using a simple timeline to animate the background color of the containing div, the coordinates of the 2 ellipses and their filters definitions, transitioning between 3 states.

 

you can see a demo here (sorry I couldn't reproduce it on Codepen):

https://codesandbox.io/s/relaxed-cache-9r7ppq?file=/src/index.tsx

 

The issue is that while tweening, the bounding box of the ellipses become visible (a big vertical rectangle on the right), ruining the visual effect

 

Please do you have any ideas how to fix it?

 

[Rodrigo]

Hi,

 

Sorry about the issues but I have almost no experience with SVG filters so I have no idea what could be the issue here.

 

Just to clarify a few things, when you say that you couldn't reproduce this on codepen as it only happens on React and not in VanillaJS? That would be super weird.

 

The only thing I can think of is using the Attribute Plugin to tween the values of the filters and lucky me it seems to work:

timeline.current
  .to(containerRef.current, {
  backgroundColor: backgrounds[index].backgroundColor,
})
  .to(
  q(".ellipsea"),
  {
    attr: {
      cx: backgrounds[index].ellipseA.cx,
      cy: backgrounds[index].ellipseA.cy,
      rx: backgrounds[index].ellipseA.rx,
      ry: backgrounds[index].ellipseA.ry,
      fill: backgrounds[index].ellipseA.fill,
    },
    // onUpdate: () => console.log('ellipseA update!')
  },
  "<"
)
  .to(
  q(".ellipseb"),
  {
    attr: {
      cx: backgrounds[index].ellipseB.cx,
      cy: backgrounds[index].ellipseB.cy,
      rx: backgrounds[index].ellipseB.rx,
      ry: backgrounds[index].ellipseB.ry,
      fill: backgrounds[index].ellipseB.fill,
    },
  },
  "<"
)
  .to(
  q(".filtera"),
  {
    attr: {
      x: backgrounds[index].filterA.x,
      y: backgrounds[index].filterA.y,
      width: backgrounds[index].filterA.width,
      height: backgrounds[index].filterA.height,
    },
  },
  "<"
)
  .to(
  q(".filterb"),
  {
    attr: {
      x: backgrounds[index].filterB.x,
      y: backgrounds[index].filterB.y,
      width: backgrounds[index].filterB.width,
      height: backgrounds[index].filterB.height,
    },
  },
  "<"
);

https://greensock.com/docs/v3/GSAP/CorePlugins/AttrPlugin

 

Here is a fork of your sandbox, I changed the duration to make it faster and moved the repetitive configs to the defaults object in the Timeline constructor:

https://codesandbox.io/s/delicate-haze-jk3m2c?file=/src/BackgroundGradient.tsx

 

Hopefully this helps.

Happy Tweening!

[Marcello]

Hi @Rodrigo

thank you so much, now it works very smoothly!!!

About the Codepen, I was in a hurry so using Codesandbox was faster since I just copy/pasted the code, and I didn't tried with vanilla js.

 

Again, thank you!!