Jump to content
Search Community

CssRulePlugin with TimeLine

sensenel 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

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! 


Link to comment
Share on other sites

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.



  • Like 1
Link to comment
Share on other sites


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! :)

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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! :D 
Respect!! ;) 

Thank you so much for your help!! 

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