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

Questions about Thunkable
1

Hello Community! :smile:

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

Thanks :smile:

1 Like
2

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

Or

You can make it by using Webviewer.
Regard.

1 Like
3

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! :smile:

4

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.

1 Like
5

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.

1 Like
6

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

Thanks! :smile:

7

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

Thanks! :smile:

8

Thanks a lot, @CBVG! :star_struck:

Your Idea is perfect, just needs some experiments :wink:

image
image697×381 28 KB

This worked really perfect for me :+1: :+1:

Thanks a lot Sir!!

1 Like
9

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.

1 Like
10

Okay. I’ll reduce it at my best :blush:

11

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.

3 Likes
12

Yes, It works the best :+1: :+1: (even better and smoother than the previous one :star_struck: )

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

Thanks!

1 Like
13

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 structureScreenshot 2020-08-17 at 14.15.53

Here’s the blocks:

Screenshot 2020-08-17 at 14.16.59
Screenshot 2020-08-17 at 14.16.591006×1306 134 KB

In this there are two buttons to select which direction to slide the card.
Screenshot 2020-08-17 at 14.32.56
Screenshot 2020-08-17 at 14.32.56850×488 46 KB

2 Likes