[CSSRulePlugin Not working]

3 hours ago, Jonathan said:

Hi again,

 

To me this looks unrelated to GSAP since i'm seeing a lot of errors that happen before GSAP gets run.
 

It looks like you have some cross domain policy security issues going on in your site. Your trying to bring in scripts from another domain which is triggering the browser sandbox security for the same origin policy

 

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

 

I see tons of errors not related to GSAP, that is why your having issues:

 

Loading failed for the <script> with source “https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592”.

Content Security Policy: The page’s settings blocked the loading of a resource at https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592 (“script-src”)

undefined project.js:204

undefined project.js:205

undefined project.js:206

undefined project.js:207

 

I'll echo what @GreenSock Jack advised if running locally you will need to make sure your using a local testing envirnoment like XAMPP or MAPP so Chrome doesn't trigger its local sandbox for security.

 

@Jonathan Thanks again i really appreciate your help the problem is the tweens are working fine in development environment but not on the live server  i fixed all the problems related to content security policy but still having error i'm hosting my fiels in aws s3 and these are my cors settings my fiels are public and i have access to them i'm having a trouble figuring it out  

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

 

[CSSRulePlugin Not working]

26 minutes ago, Jonathan said:

Hello @Mntad and welcome to the GreenSock Forum!

 

Usually that error happens because your GSAP getRule() code is running before your CSS your trying to reference in your GSAP code CSSRulePlugin.getRule(). So if your JS is trying to getRule() that hasnt been loaded in to memory then you will get that error about accessing the CSS Rules.

 

I notice you have a DOM ready your checking before running your code. You might want to put a window load event inside your DOM ready event. The reason being is that DOM ready doesnt check for external CSS files being loaded. That check happens with the window load event which makes sure all external aseets like images, links, fonts, CSS stylesheets, and JS scripts are loaded.

 

Try this since your using jQuery to make sure your code doesn't run until all assets a have been loaded:

 

// wait until the DOM is fully loaded (html, svg, markup etc)
$(document).ready(function() {
  
    // wait until all external assets are loaded (css stylesheets, js scripts, fonts, images, etc)
    $(window).bind("load", function() {
    
        // custom GSAP code goes here
    
    });
  
});

 

Happy Tweening!

Hi @Jonathan thank's for the reply i tried what you've suggested well the code got executed after everything loads but i'm still getting the same error of undefined 

[CSSRulePlugin Not working]

6 hours ago, GreenSock said:

Welcome to the forums, @Mntad. It's tough to diagnose a live site like that, but I'd make two suggestions:

1. Make sure you're using the latest GreenSock files. It looks like you're using a file that's REALLY old (2014). 
2. Try creating a reduced test case that demonstrates the issue, hopefully in something like codepen so that we can tinker around and see exactly what's going on. 

You are writing the rules exactly as you have them in the CSS, right? 

 

Also, you might want to check this out: https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760

Hi again this is exactly what i'm using in my live website  with the same jquery and gsap cdn with the latest versions everything seems to work fine in codepen but in my website it returns TweenMax.min.js:17 Uncaught Cannot tween a null target. the problem i  triggers when i click on the hamburger  i console log the output of selected classes with CssPlugin and i've got 'undefined'  you can check it from https://www.mntad.com/

See the Pen aRaRxQ by brahimchougrani (@brahimchougrani) on CodePen

 

[CSSRulePlugin Not working]

hello so i tried using CSSRulePlugin.js it worked fine in local i'm using django default local server but when i load it in the production server it doesn't work at all i tried using gsap cdn  my cdn from amazon loading if from the same domain but nothing seems to work the console prints me

Quote

'DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Function.CSSRulePlugin.getRule (https://www.mntad.com/static/js/CSSRulePlugin.js:60:19)'

my code is :

Quote

var rule3 = CSSRulePlugin.getRule(".hamburger-inner");

var rule1 = CSSRulePlugin.getRule(".hamburger--collapse.is-active .hamburger-inner:after");

var rule2 = CSSRulePlugin.getRule(".hamburger--collapse.is-active .hamburger-inner:before");

var rule4 = CSSRulePlugin.getRule(".navbg");

here is the website the animation trigger when you click on the hamburger

https://www.mntad.com/