# Can a Flex container ease-in

**URL:** <https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 5, 2024, 10:14am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410 "2024-04-05T10:14:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Leech](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex_leech/32/39391_2.png) [@Alex\_Leech](https://forum.inductiveautomation.com/u/Alex_Leech)\
**Post date:** [April 5, 2024, 10:14am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410/1 "2024-04-05T10:14:32Z")

</div>

Hi forum!

Theres a great [video from Artek](https://youtu.be/PkniOwjdKGE?si=ZadlwP-TDpSwfc8b) that gives the ability for docked views to 'ease-in-out' using the CSS advanced stylesheet. On PC when hovering the width grows, and on mobile, when tapped this occurs.

With this in mind - Is it possible to do the same for a flex container within a page?  
I've tried playing about and not really had much joy so far!  
The goal would be a icon, that when clicked changes the basis from 0px - 400px, allowing the flex container to appear, but also 'slide in'.

Thoughts? 🙂

Thanks!  
Alex

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [April 5, 2024, 10:23am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410/2 "2024-04-05T10:23:56Z")

</div>

Yes I used this a lot on one of my projects.  
Just keep in mind that it doesn't work with `basis: auto`.

It did look a bit funky when the container was "closed", so I also changed some other properties to make it completely disappear when closed. I don't remember exactly what.  
You could try playing with opacity as well.

---

<div class="post-metadata">

**Author:** ![Alex\_Leech](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex_leech/32/39391_2.png) [@Alex\_Leech](https://forum.inductiveautomation.com/u/Alex_Leech)\
**Post date:** [April 5, 2024, 10:32am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410/3 "2024-04-05T10:32:35Z")

</div>

Thanks Pascal!

I've got a CSS class of:

```auto
.psc-animate-width {
	width: 400px;
	transition: width 2s ease-in-out;	
}

```

Perhaps I dont need the width parameter in here?

The flex is setup as follows:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/05520f67c0234e3b23cff28aca05355ab6da7212.png)

And a pushbutton that has script:

```auto
	if self.parent.parent.getChild("Filters").position.basis != "400px":
		self.parent.parent.getChild("Filters").position.basis = "400px"
	else:
		self.parent.parent.getChild("Filters").position.basis = "0px"

```

But still seems to not have a transition - Have I missed anything? 🙂

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [April 5, 2024, 11:11am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410/4 "2024-04-05T11:11:52Z")

</div>

You're changing the basis, but transitioning on the width.  
2 different properties, that's why it doesn't work.

---

<div class="post-metadata">

**Author:** ![Alex\_Leech](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex_leech/32/39391_2.png) [@Alex\_Leech](https://forum.inductiveautomation.com/u/Alex_Leech)\
**Post date:** [April 5, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/can-a-flex-container-ease-in/88410/5 "2024-04-05T11:34:04Z")

</div>

So I am! ☺  
Cracked it with 'flex-basis' property - Thank you kindly!

```auto
.psc-animate-basis {
	flex-basis: 0px;
	transition: flex-basis 0.2s ease-in-out;
}

```