[Solved] How to make a slide horizontal effect on a Column while disappearing it?

[kartik_old]

Hello Community!

---

My question is, how to make a column slide horizontally and disappear?
I looked for alike properties in column, but found nothing…

Any help would be appreciated

Thanks

[BlueWhaleYT]

Hi there,
Did you mean looking for Horizontal scrolling?
This post might help you.

Create Horizontal Scroll (Swipe Like) Row

Hi everyone! I looked around the community to find a way or a solution to create horizontal scroll row with multiple columns inside it. something like the blue part of this Gif example.

Preview of Example GIF

<a class="lightbox" href="https://cdn.dribbble.com/users/969602/screenshots/4901594/horizontal-vertical-scroll.gif" title="horizontal-vertical-scroll.gif" rel="nofollow noopener">[image]</a>

(I need a solution to solve the problem in thu…

Or

You can make it by using Webviewer.
Regard.

[kartik_old]

Did you mean looking for Horizontal scrolling?

No buddy,
I was looking for like when button1 click, automatically invisible the previous column, and show the new one.
This seems very very easy, right?
But, the twist is, I want to make a horizontal slide effect for the next column (when the button is clicked) i.e, when it comes & gets visible.

Thanks!

[CBVG]

Here is an idea that could work (assuming that your ‘horizontal slide effect’ precludes the use of the ‘visible’ property, that would likely be very abrupt).

Use the “width” property, and change it using a loop.
When you want column1 to fade, clicking the button would go into a loop where the width of column1 is reduced. Suppose the width of that column is initially 40%. Then a “count i from 1 to 10” loop would set the width to “40 - i * 4”; you just have to put a “wait 0.05 second” in the loop to made this happen over half a second overall.
To make the next column appear, you have a loop that sets the width to “i * 4”, making it get progressively larger.
Or you combine both the shrinking of columnA with the enlargement of columnB by having them both in the same loop, whatever width A loses, B gains.
You will have to capture which direction you are swiping so that you know which to enlarge and which to shrink.

[renren66]

Is the use of columns necessary?
Perhaps a simple solution is to use a stack navigator with “card” as transition mode, but that only works on screens.

[kartik_old]

Thanks a lot @CBVG!
The solution seems interesting…
I’ll now try this out

Thanks!

[kartik_old]

Is the use of columns necessary?

Yes…
I am making a flash cards like thing, when next button is clicked, show the next card through transition.

Thanks!

[kartik_old]

Thanks a lot, @CBVG!

Your Idea is perfect, just needs some experiments

---

This worked really perfect for me

Thanks a lot Sir!!

[CBVG]

For what it is worth, I think that you can do away with the “wait”. 1e-10 second is way beyond what the CPU can count (it would require a CPU with a clock rate beyond 10 GHz, and that is just not going to happen any time soon); in effect, your “do something” does nothing except add the delay of being called and returned. The process is paced by this call.

Other thing that could be made: have the count go from 95 to 1 by -1. That way you would not have to subtract; you just join “i” with “%” and be done.

[kartik_old]

1e-10 second is way beyond what the CPU can count

Okay. I’ll reduce it at my best

[CBVG]

Perhaps you should change by 5% width instead of 1% and have a time delay of whatever is required to make it look smooth. Right now, it probably is running at over 100 frames per second, and not only the eye cannot see, but the device screen cannot keep up and is dropping frames anyway. At 20 frames per second, you would not notice already.
It would be better if you pace mostly through “wait”, because another user could have you app on a machine that is not as quick. Right now, with 1e-10 second, you are paced by the ability of the phone CPU to keep up with the program itself.

[kartik_old]

Perhaps you should change by 5% width instead of 1% and have a time delay of whatever is required to make it look smooth.

Yes, It works the best (even better and smoother than the previous one )

Thanks a lot, @CBVG
Hats off to u… I thought that this transition is not possible at all, u made it possible

Thanks!

[shane.holohan1864qsw]

I solved this in a slightly different way - sharing here in case it’s useful. I wanted the ‘card’ to slide off-screen without compressing it as it went. The solution is three columns nested inside one another. The first one is the full size of the screen, centred on the screen, content in this column is set to the direction in which you want to slide the ‘card’ off-screen (right or left). Inside this is a column initially set to the full width of the screen, but importantly, its content is set to the other side (opposite to the direction of slide) - reducing the width of this column will slide the third column (inside the second one), which contains the ‘card’ and whose width is fixed at the screen width.
In essence what you build (if you imagine the columns as physical objects) is a ‘frame’ fixed to the screen, a shrinkable frame fixed to one edge of this frame, and a frame holding the card, fixed to the other edge of the shrinkable frame. When you reduce the width of the shrinkable frame it ‘pushes’ the ‘card’ off-screen.
Here’s the design structure

Here’s the blocks:

In this there are two buttons to select which direction to slide the card.