Iconimation

megan.bond (@megan_bond)

25683

0

1

About This Space

No description provided.


Last updated on April 3, 2019

Public Permissions:   View   Open/Fork   Run   Comment  

Icon Animations

Why Animate Your Icons?

  • Convey meaning or purpose.
  • Convey change in status, purpose, or state.
  • Bring attention to.
  • Fun for users.

How Do Animate Icons?

  • No need to reinvent the wheel. Search the internet for existing code for the animation you want.
  • Understand CSS better than JavaScript? Define CSS classes to animate your icons.
  • Understand JavaScript better than CSS? Write JavaScript code to animate your icons eternally or on certain events.
  • Prefer JQuery to JavaScript? Make sure the JQuery library is included in your screen before writing your JQuery animation code.
  • Know how to gif-ify better than coding? There are a variety of tools to create an animated gif image. These gifs can be used with CSS, JS, or JQuery to be switched in and out with static images.
  • Prefer frame animation? Static images can be switched in and out on timed intervals to create the illusion of animation, which is essentially what all animation is anyways.

Where to start?

  1. Pick your icon.
  2. Determine what animation you would like your icon to have, giving consideration to duration, intention, and

Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post

Filters:

Popular Recent

Quick Display 9

Empty template with the basics set up for a quick display.

megan.bond

18332

0

0

readChanged Check

Empty template with the basics set up for a quick display.

megan.bond

21861

0

0

Refocus Last Focused Row

Save the row the user was on before the screen was submitted. Then, refocus that row when the user has returned to the page, even if they went to other pages in the meantime.

megan.bond

26133

0

1

Responsive Dashboard

A simple dashboard example that uses responsive design

megan.bond

26048

0

0

responsive design with grids

Empty template with the basics set up for a quick display.

megan.bond

23838

0

0

Retrieving Grid Values

An example of how to retrieve the grid data and work with it for comparisons and manipulations.

megan.bond

29891

0

0

Rich Display CSS JavaScript

A demo of how to build Rich Displays in the Visual Designer that integrate with external CSS and JavaScript file

megan.bond
Alex

26480

0

0

Rich Display CSS JavaScript 2

A demo of how to build Rich Displays in the Visual Designer that integrate with external CSS and JavaScript file

megan.bond

25823

0

0

Rich Display CSS JavaScript 3

A demo of how to build Rich Displays in the Visual Designer that integrate with external CSS and JavaScript file

megan.bond

25221

0

0

Rich Display Hello World

A Hello World app with both dynamic output and input fields. It also illustrates the basics of screen transition animation.

megan.bond

25823

0

0

Rich Display Hello World 2

A Hello World app with both dynamic output and input fields. It also illustrates the basics of screen transition animation.

megan.bond

25974

0

0

Rich Display Hello World 3

A Hello World app with both dynamic output and input fields

megan.bond

25918

0

0