Jump to content
Search Community

CSSRulePlugin doesn't work with TimelineMax

Catalin R. test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I've downloaded TweeMax, TimelinMax and CSSRulePlugin. Are these enough for this code?


var openSection = $(".bcg-open");


        if (openSection.length) {
            var sectionBefore = CSSRulePlugin.getRule(".bcg-open:before"),
                sectionAfter  = CSSRulePlugin.getRule(".bcg-open:after"),
                tl            = new TimelineMax({delay:1, repeat:-1, yoyo:true, repeatDelay:2});

            .to(sectionBefore, 1, {cssRule: {scaleY: 0}}, 'open')
            .to(sectionAfter, 1, {cssRule: {scaleY: 0}}, 'open');


Can anybody help me, please?


Link to comment
Share on other sites

@DevSaver We had few questions recently about this similar issue, some of them were caused by local files. And others were because CSS file that applies pseudo elements was being loaded after javascript file. You can see that happening in following demo.


See the Pen WzvQBQ?editors=0010 by Sahil89 (@Sahil89) on CodePen


If neither solves the issue then we will need more information like, what kind of setup you have, whether you are using latest files and if it happens in all browsers or some specific browsers. A demo would help, if you can't reproduce it on codepen then a link to live site or reduced case demo from your server will be helpful.

  • Like 2
Link to comment
Share on other sites

Hi DevSaver,


Sorry to hear you are having problems. The site you are linking to is loading literally hundreds of javascript and css files.

Please provide a reduced test case that includes just a single tween of a single rule. If you can get a very simple example working then at least we know that a conflict is being caused elsewhere. If the simple example breaks, it will greatly speed up our ability to diagnose the problem.



  • Like 2
Link to comment
Share on other sites

Hello @DevSaver


Its best to create a reduced codepen example like @Carl  advised.


I am seeing various warnings and errors in the console:


11:16:51.352 Content Security Policy: Duplicate script-src directives detected.  All but the first instance will be ignored.
11:16:51.386 Loading failed for the <script> with source https://catalin.devsaverr.com/assets/js/index.php”.
11:16:51.388 Content Security Policy: The pages settings blocked the loading of a resource at https://catalin.devsaverr.com/assets/js/index.php (“script-src 'none'”).


Here is a video tut on how to create a limited codepen demo example:



Then we will be able to help you solve your issue. ;)


Happy Tweening!

  • Like 4
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...