Jump to content
GreenSock

jstafford

Wrestling with how to keep styles seperate from TweenMax javascript

Recommended Posts

I have been struggling today in finding a clean way to refactor my GSAP Javascript from CSS styles. I am doing this at the request of coworkers who would like to see the CSS Style seperate from the GSAP Javascript. I  thought I would give it a try with += className and -= className, but the gsap specific styles like autoAlpha, xPercent, yPercent don't work when housed in an external stylesheet. Can anyone suggest a clean way where there is little if no reference of styles in my GSAP javascript while also accounting for "gsap specific styling variables"?

 

To illustrate what I am trying to do, I have two codepens.

 

GSAP Transform with External xPercent and yPercent (the gsap transform doesn't work for xPercent and yPercent here; I thought gsap might be able to parse this and still use the xPercent and yPercent)
 
GSAP Transform with xPercent and yPercent in TweenMax call (traditional way: works, block is centered)

See the Pen xwmqwp by jstafford (@jstafford) on CodePen

See the Pen WQLpQv by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

I have thought about stopping short of putting all the stylings in an external css (esp. gsap specific ones like autoalpha, xPercent, yPercent, etc.) but it would be very cool if I could cleanly refactor all stylings into an external stylesheet of some sort.

Link to comment
Share on other sites

Can't you just use this in your CSS? :)

 transform: translate(-50%,-50%);

If you change that one line in your CSS, your first pen matches your second.

 

See the Pen WQLpzG by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

Also - if you don't want to use GSAP's autoAlpha in your Tweens and are just trying to tween between classes, you can just use opacity and visibility since autoAlpha is a combination of those two properties.
 
Per the docs:
 

Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to"hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

  • Like 2
Link to comment
Share on other sites

Thanks PointC. I was tying my hands behind my back thinking that gsap only recognized the xPercent and yPercent for transforming something relative to its own width and height. I had read this about autoalpha, but seeing it again from you again has reassured me to just try it with opacity and visibility in my css. Making this autoAlpha more mysterious than it needs to be. Thank you sir.

  • Like 2
Link to comment
Share on other sites

Nice Job PointC :D

 

Don't forget the vendor prefix for early versions of webkit on Chrome, Android, iOS, and Safari:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

http://caniuse.com/#search=transforms

 

:)

  • Like 1
Link to comment
Share on other sites

-webkit-transform:
-ms-transform: /* IE 9 */
transform: 

 

looks like -ms-transform for ie9; haven't had to worry about prefixes in a while :)

  • Like 2
Link to comment
Share on other sites

Yep prefixes can be hassle ;)

 

If you really didn't want to worry about browser vendor prefixes you could also just use the GSAP set() method. Allow GSAP to add the right CSS property with or without prefix for you.

 

And add it before all your other custom JS, and before your window load event

 

TweenMax.set("#block",{x:"-50%",y:"-50%"});

 

But it doesn't hurt, just to have it in your CSS stylesheet like PointC suggested. Whatever works best for your project :)

Link to comment
Share on other sites

Quick question Jonathan. Say GSAP pulls in the a CSS3 transition from the external stylesheet, and it is appropriately prefixed with -webkit-transition: , transition: etc. and the browser doesen't support CSS3 transitions (ie8 or ie9, http://caniuse.com/#search=css3%20transition); will GSAP still do its magic?

Link to comment
Share on other sites

You really should not be mixing GSAP with CSS transitions, since they will be both fighting over animating the elements. Its best to use either or in regards to CSS transitions, CSS animations, and CSS keyframes.

 

CSS transitions interpolate the values and then you are asking GSAP to animate those values as well. Creating a tug of war or just buggy unexpected behavior.

 

According to the spec .. CSS transition property is not an animatable property. Since it is what helps animate other CSS properties, But itself can not be animated.

I would remove any CSS transitions on elements you are animating with GSAP, and / or set the CSS transition property to none on those elements.

 

So when it comes to CSS transitions just use it or use GSAP. I would use GSAP since it can animate, even in IE6. So basically GSAP is your best choice for cross-browser animation in the web browser!

  • 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.
×