cta.js

cta.js or "Call to Animation" is a light-weight performant library to animate your "action-to-effect" paths.

Get started

What can I use it for?

Navigation in tile based apps

Click any tile below

Opening modals on button clicks

Click for awesomeness

Opening sidebars

Open the Sidebar

And just about anything...imagination is the limit

And why do I use it?

To improve your user experience by providing visual continuity.

Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure, avoid confusion when layouts change or elements are rearranged, and improve the overall beauty of the experience.
Google Material Design

Browser Support

cta.js works best on latest versions of Google Chrome, Firefox and Safari.

For all non-supported browsers, the library does nothing and fallbacks to normal behavior without any explicit handling in your code.

Visual Continuity

Transitioning between two visual states should be clear, smooth and effortless and not confuse the user. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused.
Google Material design

Share it if you like it



Tweet Star

Customary cat!

You found me :)

Hierarchical timing

When building a transition, consider the order and timing of the elements' movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.
Google Material design

Consistent choreography

A well-choreographed app also provides teachable moments. When transitioning elements are coordinated, the user's understanding of the app grows. They "get" the app; they don't feel disoriented by the animation.
Google Material design

Do you think this is Awesome?


Yes No
Tweet Fork me on GitHub