search

carbon-design-system / icons-motion

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

Add more apic icons #229

Closed kristastarr closed 1 year ago

kristastarr commented 1 year ago
netlify[bot] commented 1 year ago

Deploy Preview for carbon-icons-motion ready!

Name Link
Latest commit 858d37853adbf29faa965f7bf47b432e521ca4c0
Latest deploy log https://app.netlify.com/sites/carbon-icons-motion/deploys/641b676ce5b8ef00082c749d
Deploy Preview https://deploy-preview-229--carbon-icons-motion.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 1 year ago

Deploy Preview for carbon-icons-motion ready!

Name Link
Latest commit 78a71d404bf7b32ac471fe82540b9129da4e8c0e
Latest deploy log https://app.netlify.com/sites/carbon-icons-motion/deploys/643dbee035d4640008bf6fcf
Deploy Preview https://deploy-preview-229--carbon-icons-motion.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

kristastarr commented 1 year ago

Sean, Mike, @elycheea @glapadre I’d love some feedback on the animation for the Dashboard icon here:
https://deploy-preview-229--carbon-icons-motion.netlify.app/#/apic-demo

It’s one that Mike had animated previously using Lottie, and I tried to replicate with CSS to be used on the API Connect landing page. Here’s the Lottie version that I used for reference: https://pages.github.ibm.com/Krista-Starr/carbon-icon-animations/#/lottie-demo The ease and timing is definitely different so Mike whenever you have time to share the AE file I can get the exact specs and update. Are there any other tweaks you guys would recommend?

I’ll be doing a few more CSS versions of Mike’s Lotties to see if I hit any limitations, but I think this is a good one for us to look at as we compare pros and cons of both approaches. After looking at both versions, do you guys have any thoughts?

Also it needs a code review if anyone has time 😄

elycheea commented 1 year ago

@kristastarr Both versions are looking good so far. In the CSS version, I feel like a delay before transitioning back could be nice though. Also looks like we have the donut rotating in the opposite direction.

The Lottie version does seem to have a smoother animation at the moment, but I think with adjustments to the timing and easing, they could be comparable. Noticing Lottie lags a bit between animations, but I’m guessing that’s more related to having the same icon several times or just the prototype and not an issue with Lottie itself, but commenting here just in case there’s a limitation there.

glapadre commented 1 year ago

To @elycheea's point above, the Lottie version appears to have a smoother animation for now, so with small adjustments to the timing and easing these will look amazing! Question on the dashboard icon in the Lottie demo, is the pause/delay supposed to be so long? It feels off to me like I'm waiting for the icon to transition back to its original state. Ps. I will find some time to review the branch today 👍

mikeolasov commented 1 year ago

The basic setup works great, but I think for hover "loop" the motion should be updated to match the approach we've explored in other icons. Here's a reference vid/.aep animated_icons_dashboard_01.aep.zip

https://user-images.githubusercontent.com/27870459/229200249-686a0e1e-ecf1-443f-b49c-120e71e9cd4f.mp4

kristastarr commented 1 year ago

This one is ready for code and motion design review! 🎉 @mikeolasov Let me know what you think! Unless you have strong objections, I would like to move forward with these animations since I think they are pretty consistent with what we've been talking about. If you see more things that need to be refined, I think it would work best if you can go ahead and open issues for them, and they can be fixed in a future PR (unless they are super small/fast 😅 )

kristastarr commented 1 year ago

@elycheea The things you mentioned for Globe should be corrected now (globe rotation animation and svg tag alignment). I removed Grid and replaced it with Apps since our product is using that Apps now instead.

@mikeolasov These are ready for your green light 😄 (I hope)

kristastarr commented 1 year ago

Going ahead and merging this - @mikeolasov Per our conversation, we will open a new issue for the browser inconsistencies on "Connection signal" lines