[Animating ellipses inside SVG, the bounding box is visible]

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

[Animating ellipses inside SVG, the bounding box is visible]

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?

 

[Error running Scrolltrigger.matchmedia() and Storybook: _win is undefined]

OMG you're right! I forgot that in Storybook the component are not wrapped by the _app component, where I put the registerplugin!!

 

Thank you!!!

 

[Error running Scrolltrigger.matchmedia() and Storybook: _win is undefined]

I have a Next.js/React project with typescript and Storybook: when using Scrolltrigger.matchmedia() function the component always give an error when running inside Storybook:

_win is undefined

matchMedia@http://localhost:6006/vendors~main.d3f7aa1f55228e485314.hot-update.js:1541:10

 

Removing matchmedia it all works as expected, but I need it in the project, this is very upsetting...

 

You can find the demo code here on github: https://github.com/marcello-palmitessa/gsap-scrolltrigger-issues-demo