Can a Flex container ease-in

Ignition
,
1

Hi forum!

Theres a great video from Artek 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? :slight_smile:

Thanks!
Alex

2 Likes
2

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.

3

Thanks Pascal!

I've got a CSS class of:

.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

And a pushbutton that has script:

	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? :slight_smile:

4

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

1 Like
5

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

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