sensenel

CssRulePlugin with TimeLine

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! 
regards

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

:)

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
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.