Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Catalin R.

CSSRulePlugin doesn't work with TimelineMax

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

Ya it should work unless you are using it locally then it won't work in chrome. You need to open your page from server, a local server would work as well.


Also, TimelineMax is included in TweenMax.



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


  • Like 5
Link to comment
Share on other sites

Hello buddy!


It should work! As per @Sahil said... you can use TweenMax alone with CSSRulePlugin....

  • Like 1
Link to comment
Share on other sites

I've tried again. The plugin doesn't work! In console returns "Cannot tween a null target." And, for these: console.log(sectionBefore); and console.log(sectionAfter); return undefined!

Can anybody help me with this, 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.