Jump to content
GreenSock

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

Classes versus inline animation styles

Recommended Posts

Hi guys,

 

I was just looking for a bit of advice/a bit of a discussion about the pro's and con's, and the way you guys handle classes when it comes to animating essential page elements.

 

For example, if you're using GSAP to have a modal window speed in from the left, a full-screen overlay grey's out the background. At this point the first animation ends, as the user needs to do something (input an e-mail address, for example). After which the modal window zooms off, and the full-screen overlay is removed, and the page is usable again, which is a separate animation.

 

In this example there were three states; the Initial State, the Interactive State, and the End State (I just made those up), and at each of these points, different classes need to be applied to each of the elements involved (the background overlay, the modal box, etc.).

 

Baring that in mind, is it best to animate the classes, using ClassName, or to use the standard inline-styles, and maybe apply the new classes/remove old ones at the end of the animation with a set/onComplete?

 

Are there sometimes benefits to doing one over the other?

 

This is more a question about best-practice I guess, rather than a specific use-case. I've just been learning about BEM recently, and it's got me thinking a lot about how to most efficiently and develop maintainable projects.

 

 

I'd really appreciate any opinions/takes on this matter, as I really love both the BEM style of development as well as the GSAP suite.

 

Thanks guys.  :ugeek:  ^_^  :ugeek:

Link to post
Share on other sites

are you talking in the context of using ReactJs. That's the only subject where using className or inline styles come up.

 

Without knowing that I'd say using classes are for more if you are animating with CSS not with greensock JavaScript

 

Bem on its own is really nice and easy to understand

 

I think you may be confusing CSS and JavaScript combo of animating with the JavaScript way greensock offers but I will let the magicians of the forum chime in

  • Like 1
Link to post
Share on other sites

Not specifically ReactJS, or Angular, or anything like that.

 

I'm thinking more about; if I'm working on a large project, that needs to be maintained by a half-dozen people, digging into JS files to find animations isn't necessarily the most efficient way of handling things.

 

I also imagine that if you have Class A and Class B, and you want to transition from one of these states to the other, through the eyes of a new-comer to an already established project, it's much easier, and seems a lot more coherent to just see that box_blue is changing into box_red, as opposed to an RGB value magically changing from one to the other. I also find that because it's inline it seems less permanent, almost like it's not supposed to be there, or that it's just a temporary change to the element, which it might not be.

 

I'm curious if most people remove the inline styles at the end of an animation, and replace them with a solid class, that keeps the same changes the animation has created... Thinking about it though, that is creating twice as much work in terms of maintenance.

Link to post
Share on other sites

In your example clearProps should either be added on the tween or in a onComplete to clearProps once animation is complete.

 

You dont really need to remove inline styles when your done animating. It really depends on what your animating since some CSS properties when left on the element could cause the element to not function or become blurry. Elements like iframes, img tag, video elements, or sometimes buttons can stop working or become pixelated. That would happen due to leaving a CSS 3D Transform on those types of elements element on its own layer. But GSAP has a special property called force3D with a value of "auto" which will convert the 3D transform to a 2D transform after its animated if needed, to fix that type of browser behavior..

 

CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • force3D
    As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

But is perfectly fine to have CSS inline as long as the inline styles are being set with JS. And there not in the markup inline when the page loads by a human being. Usually you would only remove specific CSS properties when you need that element in that position. But inline styles are the best thing since slice bread but only when added via JS not by a human in the source inline, in that case it should go in the CSS stylesheet.

 

Swapping classes is fine for simple transitions or animation. But for timeline animation, its best to define in your tweens and timelines with GSAP, since you can also make those properties and values variables if used multiple times inside your JS. It just depends what you want to do.

 

GSAP does over the special property className to swap classes.. also found in the CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • className
    Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1" currently and you want to change to "class2" and animate the differences, you could do this:
    TweenLite.to(myElement, 1, {className:"class2"});
    // And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the "-=" prefix like this:
    TweenLite.to(myElement, 1, {className:"+=class2"});
    

    Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when a className tween initializes because the engine needs to loop through all of the css properties to see which ones are different.

And dont forget the CSSRulePlugin:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

 

:)

  • Like 2
Link to post
Share on other sites

Hi Jonathan,

 

Thanks for your feedback on the topic!

 

In your example clearProps should either be added on the tween or in a onComplete to clearProps once animation is complete.

 

I'm curious as to the difference between onComplete, and using a set. I'd of thought that onComplete implements set itself, and that using onComplete would mess with a timeline being reversed, whereas a set at the beginning and the end would always ensure that it's state is correct in both of these circumstances. Are there times when using a set method to instantiate a clearProps attribute doesn't work properly?

 

I thought I'd give the example codepen I did to demonstrate how sometimes a timeline needs to be cleared at the beginning and end, and how a class addition/subtraction could be used, and whether it was generally considered better to or not. Again, baring the BEM design philosophies in mind.

 

I appreciate that with a more general animation (a banner ad, intro video, etc.), it's not really important, and inline's are fine, but when it comes to elements that are core parts of the page flow, that the lines of best practice can become blurred. In something like an angular project, where most elements are related to each other, I would assume that having lots of inline styles could get rather messy, rather quickly.

 

Another example would be:

  • There is a button that has two states, enabled and disabled, represented by two classes, example__button_enabled, and example__button_disabled, respectively.
  • example__button_enabled has a blue background.
  • example__button_disabled has a red background.
  • When some required fields are filled out correctly, the example__button would use GSAP to transition from red to blue.
  • Whilst enabled, the button functions as you'd expect, posting some PHP or something similar.
  • When disabled however, if the user clicks the button, it shakes violently, indicating that it is not yet ready to be submitted.

If there is no class applied to the button at the end of the transition from red to blue, then there is nothing maintainable to check for to see whether or not the animation to violently shake the button should be played...

 

In that example, the most logical solution would be to transition from one className to the other, as another function relies on there being something to check against; in this case, example__button_disabled existing on the element.

 

 

Is it generally best to avoid getting classes involved, unless there are likely to be numerous animations taking place on a single element under different circumstances?

 

Is that the take home of this?

Link to post
Share on other sites

Im not near my computer so i cant reply fully. But regarding using clearProps inside an onComplete callback.. if it was reverse then yiu couod use it inside a onCompleteReverse callback instead. It just depends what you want to accomplish. GSAP is very versatile :)

Link to post
Share on other sites

Somebody asked a very similar question a couple of weeks ago...

https://greensock.com/forums/topic/15519-architecting-multiple-animations-best-practice/

 

But I think @alwayzambitious nailed it... 

 

Without knowing that I'd say using classes are for more if you are animating with CSS not with greensock JavaScript

 

...

 

I think you may be confusing CSS and JavaScript combo of animating with the JavaScript way greensock offers but I will let the magicians of the forum chime in

 

 

Classes are for CSS, and CSS is a mess. That's why there are so many methodologies for it. It's really difficult to maintain. And tweening classes can result in some unexpected behavior...

See the Pen Jovpdw?editors=0010 by osublake (@osublake) on CodePen

 

 

JavaScript is dynamic. You don't have to declare everything ahead of time like you do with CSS. Instead of adding a class to change a box blue or red, why not call a function that can be reused throughout your application?

function changeColor(element, duration, color) {
  return TweenLite.to(element, duration, { backgroundColor: color });
}
 

 

Now you can start composing animations from smaller building blocks.

See the Pen 6531c067c436fe197c1a1e7dfc971ed7?editors=0010 by osublake (@osublake) on CodePen

 

 

You can also pass in callbacks to functions, allowing the animation to trigger something else. Check out this modal animation. The enter animation attaches a click event to trigger the leave animation, and the leave animation removes the modal from the DOM.

See the Pen 0a9ff4ff69e44e59aea10b84b4744035?editors=0010 by osublake (@osublake) on CodePen

 

 

Want boxes flying in from different directions? You can reuse the same function for that. Just pass in some options and click away!

See the Pen f266abee469b9ebec5663cb7649f2874?editors=0010 by osublake (@osublake) on CodePen

 

 

And you do not need to add classes to detect state. A submit button does not need to know what color it is. All it needs to know is if the form is valid or not.

See the Pen d9912c4dbd09e46e34e63972da265d8e?editors=0010 by osublake (@osublake) on CodePen

 

 

You can also keep track of state without adding an "active" class. Check out this toggle animation.

See the Pen wKLmzK by osublake (@osublake) on CodePen

 

 

Like I said, CSS is a mess. I've never had a problem with inline styles, and I think they are easier to maintain. Inline styles may even be the future. There are plenty of React and Angular 2 apps out there that don't have any style sheets.  :D 

 

 

.

  • Like 4
Link to post
Share on other sites

Great examples Blake, to show him what i was trying to convey above

 

I love CSS ;) I understand what Blake was pointing to, and that declaring your css in JS tweens gives you greater flexibility.

  • Like 2
Link to post
Share on other sites

Just what Jonathan said. I was very excited about className tweening when I first started using GSAP. Unfortunately, it wasn't as useful as I thought it was going to be. Here's the thread where I started noticing problems with it, and gave up on using them...
https://greensock.com/forums/topic/11374-override-properties-when-tweening-classname/

And here is an alternative concept I came up with that kept everything inline...

See the Pen gbjqbE by osublake (@osublake) on CodePen

  • Like 2
Link to post
Share on other sites

Thanks a lot for all the insight guys, and sorry for the delay in replying! :D

 

I think as a general rule, I'll stick to using GSAP Tweens for all of my animation based styles, and use CSS for initial settings, and other non-animation related stuff.

 

It certainly saves quite a few headaches trying to stitch JS and CSS together across two or more files!

 

Also, massive thank you to blake for all your examples. Great stuff! :)

Link to post
Share on other sites

In reference to what Blake said about GSAP vs CSS animations, is there any way to use GSAP to animate a blend of one background image to another? I started this post a few days ago and was able to get it working in the browser - https://greensock.com/forums/topic/15793-crossfade-background-causes-svg-text-to-fade/

 

What I need is to be able to take a snapshot of the background image blend while in the middle of the transition on the GSAP timeline. I'm using these snapshots to assemble a PNG sequence for export to video. If I use the method linked above - simply setting a new BG along the timeline with a CSS transition - the CSS transition happens independently of the GSAP timeline -the result is that none of the background-blend is captured. The PNGs (at 30 FPS) go from having one background to the next with none of the transition being captured.

 

You can see what I mean by going here 

See the Pen ggmwoJ?editors=1010 by swampthang (@swampthang) on CodePen

and clicking the pause button as you see the background transition begin. You'll see that the GSAP timeline stops but the transition of the background continues. Need to be able to stop the GSAP timeline and capture the blend of the 2 backgrounds somehow.

 

I started a very simple codepen here to play with in an attempt to transfer the transition time and blend mode to GSAP's control. 

 

See the Pen ZLyGNx?editors=0110 by swampthang (@swampthang) on CodePen

 

One thought I had was to have 2 backgrounds assigned to the element and somehow fade one to the other. Just haven't found a way to reference the image URLs separately.

Link to post
Share on other sites

Well, you should know better...

 

xlwdcj.gif

 

 

You're already using canvas to generate some of the backgrounds, so I would use that. It also has a lot more blend modes. Pretty much all the ones you'd find in Photoshop.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

 

I used color-burn on that kinetic type demo I was working on.

 

xEYevuB.png

 

 

 

 

.

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

×