CSSRulePlugin doesn't work with TimelineMax

[Catalin R. 14 Likes (Newbie)]

Hi,

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});

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

 

Can anybody help me, please?

Thanks!

[Sahil 2,541 Likes (Superhero)]

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

 

[WarenGonzaga 64 Likes (Contributor)]

Hello buddy!

 

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

[Catalin R. 14 Likes (Newbie)]

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?

Thanks!

[Sahil 2,541 Likes (Superhero)]

@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.

[Catalin R. 14 Likes (Newbie)]

Hi,

I have this problem on all browsers.

See the link, please!

https://catalin.devsaverr.com/para-open.htm

[Carl 9,066 Likes (Superhero)]

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.

 

Thanks!

[Jonathan 5,176 Likes (Superhero)]

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”.
para-open.htm:15
11:16:51.388 Content Security Policy: The page’s 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!