🔗 Resources:
Source code: https://github.com/Aashu-Dubey/Ionic-...
Article: / list-animation-in-ionic-6-angular
Gist: https://gist.github.com/Aashu-Dubey/7...
Easing (09:47):- https://developer.mozilla.org/en-US/d...
🎥 Other Videos
Drawer animation (17:22): • How to implement Side Menu Animation in Io...
Playlist: • Ionic UI Templates
ℹ️ Description:
how to implement list animation in Ionic 6 & Angular. Also to switch between list type (List & Grid) programmatically.
Lists are essential part of the UI that every or most of the applications uses whether Web or Mobile and a lot of time we want the List to be shown to the user with a smooth animation, instead of just...showing, to improve the user experience (UX). So this video covers how you can animate lists in your Ionic application which works perfectly on Android, iOS & Web.
📚 Chapters
(00:00) Intro
(00:10) Create grid list UI
(02:54) Element reference for animation
(04:54) Animate the list items
(10:24) Fix Android bug
(14:12) Switch Grid/Vertical list programmatically
(16:16) Check on Web
(17:02) Get the code
(17:22) Next video brief
🌐 Other distributions:
Facebook: https://fb.watch/oQB3HbM4lI/
FOLLOW ME ON:
GitHub: https://github.com/Aashu-Dubey
Twitter/𝕏: / aashudubey_ad
Instagram: / massive.educator
Facebook: / massive.educator
➡️ All my links: https://bio.link/ashud
Support 💖
You can support me by subscribing to the channel or voluntarily sponsor through any of the following ways 🙂
1. https://github.com/sponsors/Aashu-Dubey
2. / ashud
3. https://buymeacoffee.com/ashud
🧑🏻💻 My Equipments - Affiliates (if you buy anything through these it will support the channel and allow me to improve the content quality!):
Macbook Pro: https://amzn.to/3VyfxHv
USB-C Hub for macbook: https://amzn.to/3Fa8sYt
Windows Laptop: https://amzn.to/3u84OIg
Tags 🏷:
list animations in ionic framework
implementing list animation in ionic angular
list animations with html css
animating list in ionic html css angular
how to animate lists in ionic
#Ionic #Angular #Animation #GitHub #opensource #0