🔄 Microinteractions: The Secret of Great App Design 4/5

#ui #design

Visualize Input
Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing visual elements to deliver feedback—just add nice visual details.

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

🔄 Microinteractions: The Secret of Great App Design 5/5

#ui #design

Call to Action
Microinteractions have the power to encourage users to actually interact. By bringing empathy in user experience, you have a better chances users will make a move. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind — will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

📄 Angular carousel

#angular #ui_element

✅ Article link: https://medium.com/@su.ede.kovacs/angular-carousel-e6953aa38f77

🎁 Code link: https://stackblitz.com/edit/angular-dy6ybx?file=src%2Fcarousel.component.ts

📄 Resizable Columns in Angular Table

#angular #directive #ui_element

✅ Article link: https://levelup.gitconnected.com/how-to-create-resizable-columns-in-angular-scrollable-table-a-step-by-step-guide-5b8f766c1f60

🎁 Code link: https://stackblitz.com/edit/angular-6x5egd?file=src%2Fapp%2Fdirectives%2Fcolumn-resize.directive.ts

📄 Angular Animations Tutorial: Route Transitions

#angular #ui_element #provideRouter #provideAnimations

export const routeTransition = trigger(
  'routeTransition', [
  transition('* => *', [
    query(':enter', [
      style({ 
        opacity: 0, 
        scale: 0.9 
      }),
    ], { optional: true }),
    query(':leave', [
      animate('0.2s', style({ 
          opacity: 0, 
          scale: 0.9 
      }))
    ], { optional: true }),
    query(':enter', [
      animate('0.2s', style({ 
        opacity: 1, 
        scale: 1 
      }))
    ], { optional: true })
  ])
])

    <app-nav></app-nav>
    <div 
      [@routeTransition]="data" 
      style="display: contents"
    >
        <router-outlet></router-outlet>
    </div>

✅ Article link

🎁 Code link

❤️ 🤓 Angular Animations Functions

#angular #animations #ui_element

Example explanation:

Triggers (trigger):
parentTrigger: Defines animations for the parent element.
childTrigger: Defines animations for the child elements.

States (state):
parentTrigger: Has the states start and end.
childTrigger: Has the states visible and hidden.

Styles (style):
Defines final and intermediate styles for different states and transitions.

Transitions (transition):
Defines how the animation should occur between states.

Animate (animate):
Defines the duration and timing function of the animations.

Keyframes (keyframes):|
Used in the transition from visible to hidden in the child elements to create detailed intermediate animations.

Group (group):
Used in the transition from start to end in parentTrigger to animate multiple properties in parallel.

Sequence (sequence):
Used in the transition from end to start in parentTrigger to animate multiple properties in sequence.

Query (query):
Used in the transition from hidden to visible in childTrigger to select and animate child elements.

Stagger (stagger):
Used with query to apply a delay between the animations of the child elements, creating a cascading effect.

✅ Article link 🎁 Code Link

💜 🆚 Angular Animations: Animating Multiple Items in Parallel

#angular #animations #ui_element

✅ Article link | 🎁 Code link