[Border radius not animating in Firefox]

@GreenSock @ZachSaucier @Jonathan Thank you all for taking the time to help!

 

I can confirm that the beta link fixes the issue and targeting borderTopLeftRadius etc. works as a workaround.

 

Thanks again!

[Setting up premium plugins on local]

Hey Jack,

 

I feel quite silly right now, you are correct - I hit the error once, then instead of going back to my example I just kept refreshing the page - thinking the error would go away, but at that point it navigated me away from my example. My apologies for wasting your time.

 

To not make this a complete waste, one thing I did notice on the error page is that the 'account dashboard' link points to: https://greensock.com/forums/account-dashboard - looks like it might be an error.

 

Thanks, and sorry again,

Mariusz

[Setting up premium plugins on local]

Hey all,

 

This is probably going to sound very silly but...

 

- I have shockingly green and went to my dashboard and downloaded (GSAP with Shockingly Green bonus files (3.0.5))

- I'm trying to create a basic example on my local file system with the MorphSVGPlugin.min.js

 

When I include the file using a script tag from the downloaded zip, I still get the "Oops! Trial version of MorphSVGPlugin deployed", is there a license file or something I have to include as well? I've looked everywhere and can't seem to find any documentation on this, so I assume I'm missing something very obvious.

 

Thanks!

[Border radius not animating in Firefox]

Hey all,

 

Any insight into why the border radius property doesn't want to animate on Firefox?

 

Works as intended on Chrome and Safari.

 

Thanks!

See the Pen 030f89eec5d71924f4e7bc302d03f3fb by MarioD (@MarioD) on CodePen

[Animating SVG mask content]

Nevermind, thank you for the answer!

[Transform origin confusion]

@OSUblake and @GreenSock thank you both for the amazing replies. Makes complete sense now

[Transform origin confusion]

Hey Jack,

 

Thanks again for taking the time to answer my question. I really have to learn to ask the questions correctly  what I meant to ask is:

 

 

So the 2 cases are:

 

1. We don't set a transform origin in CSS, but we set a transform origin in gsap -- outcome, item rotates around the center, what's expected

2. We don't set a transform origin in gsap, but we set a transform origin in css -- outcome, item does not rotate around the center, not what's expected

 

Does the CSS transform origin act differently than when setting it through gsap? 

 

Thanks

[using timeline methods in event listeners]

Ohhhh, that makes perfect sense! Thank you for clarifying that Jack.

 

And Mikel, thank you for clearing up some of the other issues I had with GSAP3

[using timeline methods in event listeners]

Hey Mikel,

 

Thank you for taking the time to reply, sorry I wasn't as clear as I should have been with my question.

 

I'm more interested as to why we can't use `tl.play` directly on the event listener like this:

 

button.addEventListener('mouseeneter', tl.play);

 

 

[Transform origin confusion]

Hey all,

 

How come the following happens when you try to rotate a shape with a transform origin of center center in the following ways:

 

- If the transform origin is set in gsap, the rotation works as expected, the shape rotates from the center of itself

- When you set the transform origin to center center in CSS instead, the shape rotates around a strange value

 

Any ideas as to why the transform origin acts differently when set in these 2 different ways?

 

See the Pen c58a0b50e094996e70dcdb47c74b59c0 by MarioD (@MarioD) on CodePen

[using timeline methods in event listeners]

Hey all,

 

I'm a little confused as to why you can't use a timeline method in an event listener, and instead need to define a wrapper function for it to work correctly.

 

The error that is returned if you try to call a timeline method directly from a event listener you get:

 

this.seek is not a function

 

Any insights as to why this is?

 

See the Pen a34571d40164360d403967ec750b9ded?editors=1111 by MarioD (@MarioD) on CodePen

[clip-path Firefox issues]

Searching around a bit more and I found out that `clip-path` is not fully supported by Greensock just yet.

 

It looks like there is a version that might be available for `inset()` in the next release (https://github.com/greensock/GreenSock-JS/issues/306)

 

Any word on getting `circle()` to work as well? Is this something we could potentially see in the future?

 

Thanks!

[clip-path Firefox issues]

Take a look at the following example in Chrome and Firefox. Inspect the span and see what value Greensock assigns to the <span> tag.

 

In Chrome: clip-path: circle(10px at 50% 50%)

In Firefox: clip-path: inset(9.999% 49.995% 49.995%)

 

Anybody know why this might be the case for Firefox? I don't want it to change the shape from circle to inset and the pixel value to a percent.

 

Thanks!

See the Pen 7ffddf797d62ebc97c4b73c489417e82 by MarioD (@MarioD) on CodePen

[Animation co-ordinates wrong after resize]

@GreenSock this was going to be my follow up question... but why?  Thank you for the beautiful explanation!

[Animation co-ordinates wrong after resize]

@ZachSaucier Thanks for the tip, it looks like you're right - setting all the position properties with .set() fixes the issue.

 

Thanks for taking the time to answer my question!

[Animation co-ordinates wrong after resize]

See the Codepen for directions.

 

Anybody have any ideas?

See the Pen eefa2490608fbac08bcf8651168081f0 by MarioD (@MarioD) on CodePen