search

carbon-design-system / icons-motion

A library of animated Carbon icons
Apache License 2.0
17 stars 10 forks source link

New icon animation: Saving #245

Open kristastarr opened 1 year ago

kristastarr commented 1 year ago

Name of icon to be animated as shown in Carbon Icon Library: Saving

watsondesign commented 1 year ago

Current state: saving 2

Feedback from Mike on this:

Transition looks good. I think general speed of the loader feels right, might try a little slower (in case the context needs it to be less obtrusive)

I'd play with modifying the floppy disk path so it maintains consistent buffer between the circle and checkmark (animating the lines closer/farther away as you transition)

kristastarr commented 1 year ago

@watsondesign This is looking awesome! Once you are done refining, lmk and I'll add it to the library and the demo page! 😄

watsondesign commented 1 year ago

save_icon.zip @kristastarr Here is the after effects file and the illustrator file for you to begin working

kristastarr commented 1 year ago

https://github.com/carbon-design-system/icons-motion/pull/247 adds an icon with three states (in progress/success/failure) and buttons on the demo page to simulate a change in status, so you can see how each state looks. @watsondesign we can update this with your version once it's finished 😄

See the demo here: https://carbon-design-system.github.io/icons-motion

watsondesign commented 1 year ago

I think we can go ahead and close this one! Thank you @kristastarr