Jump to content
Search Community

Issue on codepen with upgrade to v3

PedroZorus test
Moderator Tag

Recommended Posts

Hello everyone,

 

I've just upgraded my project to GSAP v3, but CSSRulePlugin doesn't works properly anymore.

In a first time i've thinked that was a problem behin the CDN delivery but after few tests, i can't see where exactly is the problem.

 

Below, the console warned me about stuff extends with CSSRulePLugin.

 

image.png.6da35bab2329ea11fcfc6a72a53833c8.png

 

Someone can explain to me what should i change to make it work ?

 

Thanks you by advance !

See the Pen wvBKLoy by Pierre-Darrieutort (@Pierre-Darrieutort) on CodePen

Link to comment
Share on other sites

This has to do with the fact that you're loading in CSS from another domain, so the browser will not allow JS to manipulate it in any way (it's a security thing). 

<link href="https://fonts.googleapis.com/css?family=Merriweather:300,900&display=swap" rel="stylesheet">

 

https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property/49994161

https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760

 

Are you saying that GSAP v2 worked in this same scenario? According to what I've read, it shouldn't. :)

  • Like 3
Link to comment
Share on other sites

It's actually working with GSAP v2 (Here

See the Pen VwwQJRy by Pierre-Darrieutort (@Pierre-Darrieutort) on CodePen

)

 

But after the font link removed with GSAP v3 (Here ), the console still write Invalid property ease set to power4.in Missing plugin? gsap.registerPlugin().

 

From the v2 pen to the v3 pen i've just changed the properties names like described in the documentation, i don't understand where is the problem from ?

Link to comment
Share on other sites

 GSAP is animating the CSS values fine in the GSAP 3 version - you can check that using your developer tools.

 

There seems to be a bug in GSAP 3 that forces timelines with a .timeScale() to play forwards even if it's reversed (like what you have). Removing it works: 

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

 

@GreenSock Here's a reduced case demo:

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

 

@PedroZorus Some other improvements for your code:

  • It's probably easier for others to understand if you use reversed: true in your timeline's vars parameter instead of .reverse(true) but that's just my opinion.
  • You don't need new before gsap.timeline().
  • Use gsap.set() instead of TweenLite.set().
  • You don't need to include quotes for numerical values (like the duration and delay) in tweens.
  • The ease should go in the vars parameter but outside of the cssRule object.
  • It looks like you're trying to position the tweens in the timeline using delay. However, a negative delay like you have will make the animations be cut short. You should use the position parameter like you were doing in the v2 version instead. 

A more personal suggestion: I hate it when people don't use semicolons, hah.

 

We'll work on getting this bug fixed ASAP. 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...