Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxwellsmart84

Non Animatable CSS Properties?

Recommended Posts

I am hoping this a cut and dry question (since CodePen for whatever reason will not work).  I am trying to change the CSS class of flex container by changing the "flex-direction" class from row to column.

 

It works - meaning it changes - but with no animation.  I found out that its listed on MDN as a non-animatable class.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

I am a green developer and was wondering if its possible to animate this class with GSAP.

 

See the Pen YwxLWx by anon (@anon) on CodePen

 -- this doesnt work at all in CodePen (JQuery missing I am guessing)

 

Thanks in advance!

See the Pen rxzrgX by anon (@anon) on CodePen

Link to comment
Share on other sites

Fixed your code pen.

See the Pen rxzrgX by anon (@anon) on CodePen

 

You were calling initialAnim function which isn't present. In pen you can see how to assign tween to a variable.

 

And no, the flex-direction property does not animate.

  • Like 2
Link to comment
Share on other sites

Hi Maxwellsmart84,

 

Welcome to the GreenSock forums. When thinking about what can be animated just keep in mind that the values need to be numbers. You can animate the x of something from 0 to 5 because there are 3 numbers between 0 and 5. Over the course of the following tween:

 

TweenLite.to(obj, 1, {x:5});

 

the values of x will be 0, 1, 2, 3, 4, 5

 

When trying to tween flexDirection from row to column there aren't any possible inbetween values. You would have the same issue if you tried to tween display:"block" to display:"hidden". 

  • Like 2
Link to comment
Share on other sites

Thanks everyone - makes complete sense as to why it will not animate.  So glad I had refactored to flex lol.

Link to comment
Share on other sites

Properties that are animatable and non-animatable can be very misleading. Take the order property for example. It's listed as animatable, but only as an integer because you can't have something be in the 1.5 position. Not only that, but it doesn't animate from one position to next.

https://developer.mozilla.org/en-US/docs/Web/CSS/order

 

...or so the CSS experts will tell you. They told me I don't know what I'm talking about, but that's because they don't know the secret sauce. GSAP + relative animation (some might know it as FLIP). I know you said you're green, so this might be somewhat complicated, but you can animate between any CSS based layout, including flex row and column.

 

Flex direction

See the Pen eJGrPN?editors=001 by osublake (@osublake) on CodePen

 

Flex order

See the Pen gaQNLK?editors=001 by osublake (@osublake) on CodePen

 

Flex order again

See the Pen JYwRMa?editors=001 by osublake (@osublake) on CodePen

 

Notice that the code in all three of those examples is almost identical. That's because it works with any CSS based layout.

  • Like 4
Link to comment
Share on other sites

Great pens Blake. You're the man. :)

 

I'm not sure how I've never seen the FLIP post that you linked to, but that is some interesting stuff.

  • Like 1
Link to comment
Share on other sites

Yeah, I learned about that and a ton of other stuff from this thread. It has totally changed the way I view and create animations. A complete and total paradigm shift. It's a long read, and I still don't understand everything Kevin talks about, nor would I expect anybody else for that matter. 

 

Nothing is really spelled out in that thread, so I had to spend several weeks reverse engineering a lot of the stuff he linked to. That's how I came up with that relative/FLIP technique for CSS layouts.

 

http://greensock.com/forums/topic/12573-additive-animation/

  • Like 1
Link to comment
Share on other sites

That FLIP concept is basically the same thing i discussed in a forum post a couple months ago:

 

http://greensock.com/forums/topic/12573-additive-animation/page-2#entry52596

 

You can take advantage of that same concept with GSAP, and to add even more buttery goodness by just using:

timeline
.progress(1).progress(0)
.play();

GSAP does FLIP automatically, since it is not bound by the way CSS animations or transition functions in the browser. GSAP uses its own kung-fu, so It will record and store the values on the first run and then you don't have to worry about it being calculated on every frame. So all the calculations and values are already taken care of when you play your animation. Unlike the limitations of CSS transitions and CSS animations which are riddled with cross browser bugs, poor mobile performance, and limits in animating elements concurrently.

 

:)

  • Like 2
Link to comment
Share on other sites

Speaking of FLIP, I just saw this on CodePen.

See the Pen KVXpGW by rocbear (@rocbear) on CodePen

 

@Jonathan

I know what you're saying about GSAP recording the values, but what FLIP is doing is a little different, and what I'm doing is even more different. I haven't really looked at everything FLIP is doing, but I'm not sure it would work well for positioning like I did in those examples. It might result in screen flickering. You can see screen flickering in IE and Safari in this example. It's the exact code as the 2nd example above, but with one difference. Lazy rendering is set to true, which causes the layout thrashing. 

 

See the Pen ca898199749a567869855c3471095ae3?editors=001 by osublake (@osublake) on CodePen

 

What I'm doing is animating everything to 0, because that's its destination value. Actually, it's already at it's destination, but there's some sleight of hand going on so you don't notice it. So GSAP recording values is of no use in that regards.

 

The trick to this animation is to figure out where the element was, translate the element to it's previous position, and then kick off an animation before the browser renders. If the browser renders before you do this, it will flicker. It's not super complicated, but it can be very confusing to understand because it goes against how you normally create animations. I wish I had a white board to draw on so I could explain it better. It certainly took me awhile before I fully understood what was going on.

 

  • Like 2
Link to comment
Share on other sites

I like the way your doing your interpretation of FLIP (which I prefer). But normally with FLIP is different in the way it does it's juice, due to how CSS animation and transition functions work.

 

Whereas with GSAP, GSAP is the animation engine that drives the animation and isn't bound by the limitations of the CSS spec regarding CSS transitions and CSS animation. And doesn't rely on the adding and removing of classes to trigger a play or stop.

 

What I'm saying that there is no need for FLIP when using GSAP since FLIP relies on how the CSS animation and CSS transitions render in the browser. Not saying you cant do pre-calculations with JS, or have your elements already in that inverted state set by the styles already in your CSS stylesheet. Mainly its using JS to get the values, then set the the last values, then invert those values, and then set the inverted value(s). But then after all those pre-calculations (which could cause layout thrashing like you mentioned) the main animation is driven by adding/removing a class which triggers the CSS transition or CSS animation functions. That adding and removing of the classes is where that separation ends.

 

And that is why your approach is very creative and interesting since your using GSAP which is not bound by the limitations of the CSS spec of the CSS animation function and the CSS transition function.

 

But I like how your using good old fashioned elbow grease do that flip flim flam shim sham.. nice solution Blake!

 

:)

  • Like 2
Link to comment
Share on other sites

Oh yeah, I totally get what you're saying comparing FLIP to what GSAP already does. 

 

I know I confuse people by saying relative animations are like FLIP, which they are in concept, using inverted values, but they work differently. I don't like the term "relative animation" because it confuses people. But that's how I learned them. Every time I bring that up, people think I'm talking about doing something like this...

TweenLite.to(element, 1, { x: "+=100" });
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.
×