As one ellipsis deactivates, it pulses out in animation. At the same time, the ellipsis that's activating pulses in.
http://daneden.github.io/animate.css/
Actually I think it should be smoother than that, that was the closest example I could find.
Description
Description
Related Objects
Related Objects
- Mentioned Here
- T78370: Animate state changes of radio control
Event Timeline
Comment Actions
That example seems to have only pulse and no pulse-in and pulse-out. Could you draw a rough mock of the frames that you are thinking of?
Comment Actions
How are we rendering the circles? Reason why I'm asking is because when it grows and shrinks the transition looks choppy. Like it's fetching images while it grows or reduce in size.
Comment Actions
The circles are being made using a <div> with border-radius. The browser takes care of the frames between the two states. While we don't have complete control over the choppiness @Jaredzimmerman-WMF and I were able to fine tune it for T78370. The transition duration was 0.2s and we used an [[ http://easings.net/#easeOutBack | easeOutBack]] interpolation.
Comment Actions
After testing out some easings. My top three are:
easeOutCubic
easeOutQuint
easeOutExpo
I arranged them from slow to fast. easeOutExpo is the fastest in the group and easeOutCubic being the slowest. Comparing these three, I really like what's happening with easeOutQuint. It feels most responsive without being jumpy or sudden. You can compare all three here.