The Australian Government coat of Arms

Communities of practice

Communities of practice

Animate


#1

Please provide any feedback for the Animate component

You can also view the component page on our documentation site for the Animate component.


#2

Hi Alex et al,

I had a bit of confusion with the Animate components in the documentation.
I am using the download page to download the modules CSS & JS (not via npm).

I have used the provided code from: https://designsystem.gov.au/components/animate/ for the open/close/toggle/stop buttons.

When I used the files downloaded from the download page, and then inspect the code:

<div class="animate-example" id="animate-example-1">&nbsp;<br><br><br></div>

There is no associated CSS for the class “animate-example”. The live-demo version has CSS for the class, giving the background-color:rebeccapurple .

If I manually hardcode the style into element inline it works fine, so I know it is just missing the CSS. But it took me a long time to realise it was a lack of CSS, and not a problem with the JS file. That’s my mistake for not checking the easiest thing first!

I will add into my CSS a class of “animate”, and change the code to use “animate” because I think its easier. But perhaps the class needs to be included in the downloaded files, so it’s ready to go?
I certainly had expected that copy & pasting the code would result in a working demo.

Great work overall on it though, I am finding it very easy to use :slight_smile:
Emily


#3

Hey @emily

Thanks for your feedback :slight_smile:

The Animate module is a javascript library so we will not be adding CSS to it.

We tested our code snippets and noticed they do not have any styles on them, this mirrors the issue you are saying above. Due to this we are going to include inline styles for the

that is being animated, so that no additional code will be needed to see the animate component working. I’ve created a ticket to action this.

Thanks, Raj :slight_smile:

EDIT: this has now been corrected.

Please see our updates on the documentation website. Thanks once again @emily for picking this up!