So I have reviewed the SLDS guide on motion and it is great and all but I could not find anywhere in the documentation the actual CSS to implement the examples they give

They show all these Named Animations yet I can find no documentation on how to use them.

It is just there as an example of what you should do without any information on how to do it or is there actual CSS that can be used to achieve the results.


1 Answer 1


Eric, I suspect your issue is perhaps that you don't have an animation background. What they show on the page you reference are intended more to help demonstrate what happens when the various Lightning Design System "Effects" are applied an object of the same size. They're visual references to illustrate how the effects work when applied to Lightning Design Components.

I have a 3D modeling and animation background. At the top of the page, they mention "3 Principles" which are "Timing", "Elevation" and "Effects". When someone creates an animation or movie, they begin by "story-boarding" it. Later, they move on to "keyframing", which is deciding where they want their objects to be and in what "state" at a specific time in the animation.

Animations are sometimes broken down into "sub-animations", particularly when part of it is repetitive, such as when something vibrates, the legs of a body move as a person walks, their arms swing in rhythm, etc. The same could be said of "squish and squash" effects as a ball bounces.

When the documentation speaks of elevation, they're referring to front and back or "screen depth" where one object will appear as though it's in front or behind another. That allows objects to cast shadows on each other or to appear initially close, then move further away as it shrinks in size on the screen, perhaps even becoming partially obscured by other objects in the animation.

Depending on the type of animation one desires to create, they will "ease in" or "ease out" of transitions. Either that or they will use some other form of "non-linear" transition to make things appear more natural or to illustrate "anticipation". The use of exaggeration is often necessary with animations to convey the desired effect. Watch old Mickey Mouse or Bugs Bunny cartoons and you'll readily see what I mean.

The effects illustrated on the page you've referenced are meant to be used in combination with one another to achieve an overall desired animation that's only limited by one's imagination and the commands available to you along with the frame rates a user will be able to view (ideally 30 frames/sec).

There are many books available on the subject of animation and loads of software for creating them. I recommend you purchase a book on the basics that will help you better understand how to apply those principles using the commands available with the Lightning Design System. I don't think the documentation is intended to teach how to "animate" so much as provide you with examples of what each command does so you can decide how you might choose to utilize it to enhance your pages.

  • Solid points. But they give the css of transition-hide, transition-show, etc. I guess those actually do nothing and are useless? Why even have them then if they do nothing. I know, my ignorance is showing.......Thanks for the answer
    – Eric
    Nov 6, 2015 at 17:50
  • Transition hide and transition show are a part of animations. It's not unusual to have "actors" that initially are hidden or at some point you want to hide or have them "fade" from view. Generally speaking, when one animates, you don't normally go from "completely hidden" to "completely visible". Instead, you want to control that transition - the rate at which the actor's "opacity" or visibility changes.
    – crmprogdev
    Nov 6, 2015 at 19:36
  • 1
    It there a quick example using the SLDS css you can give to simple fade in and out an element? Using the transitions token the documentation speaks of. If it is too big for this forum or not appropriate I understand. Right now using jQuery.fadeIn() works. But I would like to do it properly using the SLDS css and tokens mentioned. Either way that you for the detailed answer.
    – Eric
    Nov 6, 2015 at 19:38
  • I've not done anything with transitions yet to have an example at hand to post or I'd happily do so. Like you, I'm still sorting through the documentation and feeling my way around to determine where I want to start with it while also working on totally unrelated things. Fortunately, I'm at least familiar with the grid design system. :)
    – crmprogdev
    Nov 6, 2015 at 20:02
  • Any update on this? Facade examples in the docs would be great Jul 12, 2017 at 18:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .