Change text content smoothly

[Fettahaud]

Hey people,

 

Simply, I want to make this text transition,

 I tried to do it with Flip, but it probably doesn't support text, I tried Flip.fit and it didn't work as well(maybe don't know how to use it)

 

So, is it doable. 

 

See the Pen PorwxMB?editors=1010 by Fettah_Aud (@Fettah_Aud) on CodePen.

[Cassie]

Hey there!

 

You were close, here's a working demo. 

 

See the Pen qBzEwMx?editors=0111 by GreenSock (@GreenSock) on CodePen.

 

Hope it helps!

[Fettahaud]

Ohh, I didn't know we could store multiple elements in one state, and I was adding nested option in getState().

 

Totally my fault,  thanks for help

[Fettahaud]

My real life case is more complex, so I changed the pen a little bit.

 

When I click on the top one, the bottom one shifts, I tried to get the state of the outer wrapper but didn't work

 

See the Pen oNrXvJK?editors=0010 by Fettah_Aud (@Fettah_Aud) on CodePen.

[Cassie]

Flip is a *layout* based animation. So anything that's going to get affected by the layout change will need to be added in to the initial state grab, otherwise when the elements are moved around stuff will jump.

In your case this is pretty much everything as you're using flex layouts. Flex layouts are very reliant on the position of other elements in the container around them. So in order to get around some stange behaviour with that, we're setting elements to 'absolute' during the course of the animation, this means that the elements are taken out of the document flow, so anything following in the document that's reliant on their position for it's own position will also move.

 

See the Pen PorqNvG by GreenSock (@GreenSock) on CodePen.

 

You could also approach this differently by ensuring that other elements aren't as reliant on the position of the element that being animated with FLIP - this can be done by giving the container a fixed width and height or positioning it so that other elements around it aren't affected. 

 

Hope this helps!

[Fettahaud]

3 hours ago, Cassie said:

this can be done by giving the container a fixed width and height

Thanks for your answer, but I feel if I keep adding containers to the states it's gonna be endless, so which container exactly in my case.

I tried to add an inner wrapper with width and height, but the other elements out of that inner-wrapper were affected and shifted again.

 

Sorry for asking too much but Flip is too complex

[Rodrigo]

Actually Flip is not that complex really, the normal thing (and I speak from personal experience) is to wrap your mind around how it actually works, which is super simple. As Cassie mentions Flip needs the state of all the elements that will be affected by a layout change/update. You tell that to Flip, the plugin will get the state and then boom! it will tween all the elements that are in that state that are affected by the layout change.

 

I think the challenge in your case lies more in the HTML front rather than the Flip side of things. You just need to simplify and/or extract part of your layout in order to avoid changing too many things and reduce the workload of Flip. I doubt that at any point this could become an endless thing, if that turns out to be the case, most likely you have an design/architectural problem in your hands, meaning you have to go back to the HTML drawing board and find a way to simplify your layout as much as possible.

 

Happy Tweening!