Try using css transitions like this: Using CSS Transitions

You’d want to use the width property and set whatever duration you’d like.

Here’s a StackBlitz link with an example. Assigning transitions to CSS properties are the best solution for simple animations like this.

https://stackblitz.com/edit/angular-ivy-gy4cvm?file=src/app/app.component.css

We have an old aspx in house application. The home page takes userName of the current user and loads the list of user profiles matching up the request.(Yes there could be more than one profiles for an username in multiple AD domains). User than selects one profile and can search for roles and permissions associated to that profile. List of roles will be displayed in a table.

I’m planning to uplift that portal using Angular(current stable version). I am using Dribble as my reference for the UI design. I’ve following idea to implement in the design but not sure whether it is possible to achieve in real time : (3rd point).

UI Design : https://i.stack.imgur.com/Vu2Gp.png

1. A Form which takes userName as input and submit
2. Loads the user profiles in form of banners(boxes)
3. When any of the profiles selected, for example 2nd profile

• 1st and 3rd boxes should disappear
• Selected banner should take the whole width expanding from its current location(smooth transition) like the big div in the design carrying more info about the user

What did I try : Started with Grid to display the banners but switched to flex as grid has no animation support(from my research). With flex I could expand the selected profile but couldn’t animate the way I preferred. div always loads from left to right. Tried position properties, keyframes but the selected banner loads from the far left instead of stretching either side from its current location(from mid of screen –> expand either side to 100%).

PS 1 : this could be a long theory or could have explained much simpler. Execuse me in either case 🙂

PS 2 : pls note that i’m asking guidance to achieve my design in code. So please don’t judge me that I am asking someone else to do coding for me. Pointing me towards a direction is much appreciated.