Jump to content
Search Community

Invalid property ease set to 0 Missing plugin? gsap.registerPlugin()

Donzé test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

I have the following warning message in the google chrome console :
gsap.min.js:10 Invalid property ease set to 0 Missing plugin? gsap.registerPlugin()

 

Can you tell me why I have this warning message?
I specify that I use the wordpress CMS

 

Here is the version of gsap I use

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/CSSRulePlugin.min.js"></script>

Here is the js code for which I use gsap et CSSRulePlugin:

 

gsap.registerPlugin(CSSRulePlugin);

// animation Menu

const boutonOpen = document.querySelector('#open-button');
const boutonClose = document.querySelector('#close-button');

const tl = gsap.timeline({paused : true});

tl.to('.pull-menu', 0.5, {opacity:1,ease: Power2.easeOut}, '-=0.5');

tl.staggerFrom('.wifeo_rubrique', 0.4,{ y:30, opacity:0}, 0.05)
var rule02 = CSSRulePlugin.getRule(".menu-part-left::after"); //get the rule
tl.to(rule02, {duration: 0.5, cssRule: {width: 95}},'-=0.3')
tl.staggerFrom('#accordion li', 0.4,{ y:30, opacity:0, delay:-0.5}, 0.05)
tl.staggerFrom('.menu--bas-page li', 0.5,{ y:50, opacity:0, delay:-1}, 0.1)
var rule = CSSRulePlugin.getRule(".pull-menu-open::after"); //get the rule
tl.from(rule, {duration: 0.3, cssRule: {height: 0, ease: Power2.easeOut}},'=-0.5')
var rule01 = CSSRulePlugin.getRule(".pull-menu-open::before"); //get the rule
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1, ease: Power2.easeOut}},'=-0.2' )

boutonOpen.addEventListener('click', (e) => {
  
  if(tl.isActive()){
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
  }
  tl.restart();

});

Thank you for your answers

 

Maxime Donzé

Link to comment
Share on other sites

  • Solution

The problem is that you nested your ease inside of the cssRule object. 

// BAD
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1, ease: Power2.easeOut}},'=-0.2');

// GOOD
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1}, ease: Power2.easeOut},'=-0.2');

So it's literally trying to animate an "ease" CSS rule :)

  • Like 5
Link to comment
Share on other sites

  • 8 months later...

 

gsap.min.js:10 Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid property drawSVG set to 100% 100% Missing plugin? gsap.registerPlugin()

 

I am getting above two warning when my page is load can you help to remove those warning()

Link to comment
Share on other sites

  • 2 years later...

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