CssRulePlugin with TimeLine

[sensenel]

Hi there, 
im new to the GSAP and first of all i want to thank the devs for their great work!

Sadly i seem to have a problem bringing together the CSSRulePlugin with a TimeLine-Object; actually i can guess the answer:  these both are not supposed to work together, right? 

Thats what i have for example (for the principle i hope it is ok posting without codepen): 

var tl = new TimelineLite();

var blueStripePseudo = CSSRulePlugin.getRule('#cropContainer:after'),
	backWhitePseudo = CSSRulePlugin.getRule("#bckgrImgPartialContainer:after");

	tl.from(blueStripePseudo, 1, {cssRule: {transform: "scaleY(5)"}})
	   from(backWhitePseudo, 2, { cssRule: { width: "100%", ease:Sine.easeInOut}});

If it is possible in general and im doing just something wrong i'd grateful if somebody could enlighten me

otherwise i would appreciate if somebody could just confirm ^^ 

Thank you for your time! 
regards

 

[Carl]

Hi and welcome to the GreenSock forums. 

 

All plugins will work with TweenLite, TweenMax, TimelineLite and TimelineMax.

 

I don't notice anything wrong with your code but there could be errors in your CSS and elsewhere. 

 

A Codepen would definitely result in the quickest resolution to this issue or you could try providing more information.

 

 

[sensenel]

Hi! 
 

thanks for your quick reply! 

Im sorry, i thought when it is at first about if or if not possible i'd save some time for now ^^

umpf ok, but good to know - i'll play around a bit before i might come back with a codepen

Thanks for your advice!

[PointC]

Just so we don't overlook the obvious here - are you loading TweenLite along with TimelineLite? TweenLite is the core of everything - or you can load TweenMax which automatically loads the following:

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax
• CSSPlugin
• AttrPlugin
• RoundPropsPlugin
• DirectionalRotationPlugin
• BezierPlugin
• EasePack

Just something to check. Happy tweening.

 

[sensenel]

Hi Craig, 

 

i've loaded TweenMax - although in my example i used TimeLineLite ...

WAIT! OMG i see it myself in my own example above!  ... i forget to merge the second tween with "." 

aarrrrg ... im sooo sorry guys! haha "from is not defined" makes sense now 

hey, gotta say although with this syntax error it animated my elements somehow, GSAP is tough stuff!  
Respect!!  

Thank you so much for your help!! 

[Carl]

Glad you got it working. No worries, we all make little mistakes like this a few times per day!