Web Animation: Functional Animation Principles

Web Animation Principles - Functional Animation

• Visually represents user interactions or system-driven changes to an element
• Reinforces user actions
• Examples include hover/pressed effects and active/inactive states

Subtle Value Changes

• Emphasizes state changes for better visibility
• Examples include number transitions and graph data updates

Question-Response

• Shows action results, confirming user input registration by the system
• Provides user feedback/acknowledgment
• Examples include transparent drag & drop cards and icon changes post-click

Hierarchy

• Establish component hierarchies using movement
• Examples: sibling element movements and root's movement origins

Intensity/Emphasis

• Highlights crucial information
• Examples include incomplete form element coloring and scrolling to highlight areas

Tutorial Emphasis

• Guides understanding of element functionality through ordered sequencing
• Examples include establishing reading order through element appearance

Sequencing/Continuity

• Keeps user engaged and adjusts the interface
• Examples include a loading element or dimming the screen before a pop-up

Brand Personality

• Establish animation parameters to match brand identity
• Examples include short animation times and smooth motions.

Web Animation vs. Film Animation

• Principles adapt for functionality, not just visual appeal
• The goal is to produce more site visits or increased ease of use

Impression

• Impressions creates brand personality

Designer and Programmer Collaboration

• Designers and Programmers need to work together to create a consistant brands
• Programmers need to implement the changes in their code, and not just design

Micro-Animations

• Help provide visual feedback to let users understand outcomes

Web Animation Design

• It emphasizes clear focused goals

State Changes

• Indicates an element's state change visually, triggered by user interaction or external events
• Benefits include user action visibility and highlighting interactive elements
• Examples: Hover effects on buttons and active input fields

Feedback System

• Feedback happens after use actions, to seem like a question and answer scenario
• Acknowledges user input and communicates action registration
• Characterized by user interaction displaying desired content and optional steps to ready next action

Example Sequence

• Cursors that are "clickable" to question an answer
• Dropdowns grow down to answer the query
• Arrow shows change of content, and prepares for the next question

Intensity or Emphasis

• Intensifies key information following repeated actions

Example

• Form fields become blue when in use
• Fields require you to display errors in red
• Submit buttons will disable to show no continue

Sequencing or Continuity

• Creates short sequences, maintaining user focus while interface adjusts
• Provides extra info showing when loading different screens

Advantages

• The processes of when loading finishes
• State changes
• Smooth cut offs

Hierarchy

• Guides users across application screens
• Help users understand elements and relations, improving usability
• Maintains a navigation map of the experience

Hierarchy Techniques

• Origin of movement - Descendants source appearance from the interacted element.
• Simultaneous Movement - Indicates equivalence among sibling elements

Fade Transitions

• Apply disappearing effects indicating independence of elements

Size Changes

• Show parent-child relationships with size modulation

Slow Value Changes

• Makes transitioning elements more noticeable
• Transitions can show that the status is increasing

Tutorial on Boarding

• Gives animations to the user so that the user learns how to use it
• Display the elements in order, to increase visibility

Brand Consistency

• Aligns animations with the brand, to have cohesion
• A brand uses standard attributes to show the persona
• Quick animations are more perceived to be quick than complex
• Other actions can be performed

CSS Animations

• It's easy to to pick up as styles cascade for the application, the simplest being animation
• CSS allows for simple transitions of a single action
• You can alternate the IU, or make smaller changes

Trigger

• Activates using the actions from your mouse
• Hover is easier to get working

Math

• To animate the values, you need to have math

CSS Transitions

• Connecting states within the object to the action
• Transition property simplifies the way for animations

Questions to define transition

• Can the user define the change?
• How can you define the leave and the enter?
• What order do you plan on changing?

CSS Transition attributes:

• Transition-property - The attribute you plan on changing, set to all by default
• Transition-duration - Defaults at 0s
• Transition-timing-function - Easing algorithms and initial value
• Transition-delay - How long will the property wait, defaults at 0s before the action occurs.

Properties and Values

• Use values that can adjust the time, so you set width, color, etc.

Box Model

• The CSS code behaves like a box or canvas
• Every section or element or has separate properties that the viewer sees

Parts of a box:

• Content - displays your content
• Padding - Fills the remaining content
• Border - Wraps the content for content and padding fill for generation
• Margin - Wraps the others

Box Display

• Block - display the new elements in new lines
• Inline - if there is more space left, place the element to the right.

Normal flow

• Using this system the display appears in front of the navigator
• By default you can stack the display of the blocks
• However, you can customize this with properties in HTML or CSS.

Transform 2D

• It's made in CSS3, it gives flexibility and function for transformations
• Without the properties, Javascript can change the elements to be more dynamic
• However for a change to occur the model has to enable other boxes

Transform Allowances

• translate - You are able to create other elements in the coordination
• translateX(x) - Moves distance x horizontal in a single function

Translation

• translateX(10px);
• translateX(-3rem);
• translateX(30%);

translateY (y)

• translateY(20px);
• translateY(-6rem);
• translateY(60%);

scaleX (x)

• scaleX(0.3);
• scaleX(1.2);

scaleY (y)

• scaleY(0.5);
• scaleY(1.8);

skewX (x)

• skewX(10deg);
• skewX(0.2rad);

skewY (y)

• skewY(15deg);
• skewY (40grad);