Donzé Posted August 27, 2020 Share Posted August 27, 2020 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 More sharing options...
Richard1604 Posted August 27, 2020 Share Posted August 27, 2020 Try putting your ease value in double quotes... Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 27, 2020 Share Posted August 27, 2020 @Richard1604 That is definitely not the issue. The format that Maxime is using is from GSAP 2 and is valid, though not recommended. We highly recommend the GSAP 3 formatting. @Donzé Please make a minimal demo of the issue so that we can see the problem clearly Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 27, 2020 Solution Share Posted August 27, 2020 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 5 Link to comment Share on other sites More sharing options...
UserX Posted May 24, 2021 Share Posted May 24, 2021 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 More sharing options...
Cassie Posted May 24, 2021 Share Posted May 24, 2021 You're missing this plugin - it's a club GSAP perk 1 Link to comment Share on other sites More sharing options...
DWingoGSU Posted June 21, 2023 Share Posted June 21, 2023 Hi, I believe something similar is happening to me. I don't quite understand why it's triggering this error in the console. Code: Link to comment Share on other sites More sharing options...
GreenSock Posted June 21, 2023 Share Posted June 21, 2023 JavaScript is case-sensitive. It looks like you tried animating "X" rather than "x". Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now