Create a basic flip animation
There are certain animations that are commonly found in a lot of different applications. They are common because people are used to the way they feel, and they are good at conveying interactions and the meaning behind them. One of these types of animations is a flip animation where you have some content and then, through some sort of interaction, it needs to flip over and reveal the content from the opposite side. We’ll this is what we’re going to create in this video.
------------------------------------------------------------------------------
👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos: • Angular Animations
------------------------------------------------------------------------------
🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)
Using the Bootjack Bounce Library (https://stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📚 Additional Resources:
Introduction to Angular animations (https://angular.dev/guide/animations)
Bootjack Bounce Animation Library (https://www.npmjs.com/package/ngx-boo...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
0:33 – Enabling Animations in Your Application
1:01 – Create and Add a Flip Animation
2:15 – Creating the Basic Flip Animation
5:26 – Binding the Animation in the Component Template
6:17 – Adding Basic CSS Needed for the Animation
7:52 – Switching the Flip Animation Direction
8:59 – Installing and Using the Bootjack Bounce Animation Library
9:47 – Adding the Animation from the Library
11:21 – Switching the Flip Animation Direction
12:18 – Customizing the Animation Duration with Params
13:18 – Conclusion
------------------------------------------------------------------------------
#angular #angulartutorial #animation
Watch video Create a basic flip animation online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 23 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 92 once and liked it 4 people.