Stagger on / Connected off


(example coming)

When we start to move, we are fast. We are reactionary, always ready to move. In UI, all elements move as one to exit quickly. As we reach our goal, we stop with a smoothness. When our interface elements move in a wave. There is a lead element followed by secondary elements.

Transformations


(example coming)

Playing off the idea of transforming your money. Maybe could be used when animating between different illustrations or badges. Transformations could use scale, position, or rotation. Switch the elements at the point of highest velocity.

Illustration line draw


(example coming)

Begin with the longest outer-most line. Draw on in a clockwise direction. The next line to draw on is the second furthest line from the center, starting 50 milliseconds from the previous lines start. Continuing this pattern until the final line has drawn on. Finally, the green elements fill in. Have not defined a direction for the mask fill in. Possibly moving up or to the left.

These signature motions coming soon


Badge Animations

Photo Animations

Cinemographs

Lists/Tables

Graphs

Successful Moments

Loading

Progress

Guidance

Touch feedback

Logo/ Tags

Product Display

Scroll Behavior / Pull to refresh

Controls

Connection

Step flow

entrance

Stagger on / Connected off


(example coming)

When we start to move, we are fast. We are reactionary, always ready to move. In UI, all elements move as one to exit quickly. As we reach our goal, we stop with a smoothness. When our interface elements move in a wave. There is a lead element followed by secondary elements.

Transformations


(example coming)

Playing off the idea of transforming your money. Maybe could be used when animating between different illustrations or badges. Transformations could use scale, position, or rotation. Switch the elements at the point of highest velocity.

Illustration line draw


(example coming)

Begin with the longest outer-most line. Draw on in a clockwise direction. The next line to draw on is the second furthest line from the center, starting 50 milliseconds from the previous lines start. Continuing this pattern until the final line has drawn on. Finally, the green elements fill in. Have not defined a direction for the mask fill in. Possibly moving up or to the left.

These signature motions coming soon


(example coming)

Badge Animations

Photo Animations

Cinemographs

Lists/Tables

Graphs

Successful Moments

Loading

Progress

Guidance

Touch feedback

Logo/ Tags

Product Display

Scroll Behavior / Pull to refresh

Controls

Connection

Step flow

exit

Stagger on / Connected off


(example coming)

When we start to move, we are fast. We are reactionary, always ready to move. In UI, all elements move as one to exit quickly. As we reach our goal, we stop with a smoothness. When our interface elements move in a wave. There is a lead element followed by secondary elements.

Transformations


(example coming)

Playing off the idea of transforming your money. Maybe could be used when animating between different illustrations or badges. Transformations could use scale, position, or rotation. Switch the elements at the point of highest velocity.

Illustration line draw


(example coming)

Begin with the longest outer-most line. Draw on in a clockwise direction. The next line to draw on is the second furthest line from the center, starting 50 milliseconds from the previous lines start. Continuing this pattern until the final line has drawn on. Finally, the green elements fill in. Have not defined a direction for the mask fill in. Possibly moving up or to the left.

These signature motions coming soon


Badge Animations

Photo Animations

Cinemographs

Lists/Tables

Graphs

Successful Moments

Loading

Progress

Guidance

Touch feedback

Logo/ Tags

Product Display

Scroll Behavior / Pull to refresh

Controls

Connection

Step flow

  • Was this Helpful?
  •