Share Posted September 21, 2020 I see strange behavior in Chrome: almost every time the script doesn't work. But sometimes, on 1/20, 1/30 reload it does. At the same time it works in the latest Edge (no extensions there except AdBlock). And the percent of working reloads is almost the same in Opera as in Chrome. Could it be any extension that interferes with GSAP? Here's my test files (sorry for not Codepen): html: <!-- Begin Stylesheets --> <!-- Reset --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <!-- Layout --> <link rel="stylesheet" href="styles/layout.css"> <!-- End Stylesheets --> <!-- Begin JavaScript --> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- GreenSock --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <!-- PrefixFree --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <!-- Main --> <script src="scripts/main.js"></script> <!-- End JavaScript --> <body> <div class="wrapper"> <div class="pic"></div> <div class="picOverlay"></div> <div class="textWrapper"> <img src="images/1_2.svg" alt="" class="text_1"> <img src="images/3.svg" alt="" class="text_2"> <img src="images/volvo_1.svg" alt="" class="logo"> </div> <div class="overlay"></div> </div> </body> Main.js: $(function(){ gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5}); }); And here's the test link: http://digitalcases.ru/2020/ek/Volvo/01/_Test/ Link to comment Share on other sites More sharing options...
Share Posted September 21, 2020 Hey danissimo. Usually the JavaScript should go after the content (i.e. at the bottom of the body), not before it. Try that. Link to comment Share on other sites More sharing options...
Share Posted September 21, 2020 If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css"> Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 Hello Zach, thank you for the answer. Tried that, but unfortunately it didn't help. http://digitalcases.ru/2020/ek/Volvo/01/_Test/ Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 6 minutes ago, GreenSock said: If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css"> In that case a page loads with errors only from a local drive, but it does work from a server (web or local). At least I don't see any errors in the Console. Link to comment Share on other sites More sharing options...
Share Posted September 21, 2020 I didn't quite understand your response. Are you saying you resolved the issue by using a server to avoid the browser's security restrictions? Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 37 minutes ago, GreenSock said: I didn't quite understand your response. Are you saying you resolved the issue by using a server to avoid the browser's security restrictions? I meant my test page loads external css without errors. But my script (now it's in the bottom of the page, as Zach proposed) with CSSRulePlugin still doesn't work. http://digitalcases.ru/2020/ek/Volvo/01/_Test/ Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 Btw, does my page work on your browsers (turning blue)? And if you reload it a couple of times? Link to comment Share on other sites More sharing options...
Share Posted September 21, 2020 11 minutes ago, danissimo said: does my page work on your browsers (turning blue)? It does if I open it in a new tab without that tab being open (right click link -> open in new tab). Very peculiar. Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 And if you F5 a couple of times? Link to comment Share on other sites More sharing options...
Share Posted September 21, 2020 As I said, it only works when I load it in a new tab without it being the active tab. The below works just fine so it's something in your setup. Try removing pieces until you get to the bare minimum of what's causing your issue then you'll have found your issue. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Volvo XC60</title> <style> .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #F1F2F2; } </style> </head> <body> <div class="overlay"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script> gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5}); </script> </body> </html> Link to comment Share on other sites More sharing options...
Author Share Posted September 21, 2020 Thank you, Zach! I'll try. 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