# \[Solved\] How to make a slide horizontal effect on a Column while disappearing it? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** solved\ **Created:** [August 21, 2019, 2:46pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607 "2019-08-21T14:46:56Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 21, 2019, 2:46pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/1 "2019-08-21T14:46:56Z")
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 😄 ---
**Author:** ![BlueWhaleYT](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bluewhaleyt/32/28437_2.png) [@BlueWhaleYT](https://community.thunkable.com/u/BlueWhaleYT)\ **Post date:** [August 21, 2019, 3:11pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/2 "2019-08-21T15:11:20Z")
Hi there, Did you mean looking for Horizontal scrolling? This post might help you. > [@Create Horizontal Scroll (Swipe Like) Row](http://community.thunkable.com/t/create-horizontal-scroll-swipe-like-row/76784): > > 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](https://cdn.dribbble.com/users/969602/screenshots/4901594/horizontal-vertical-scroll.gif) example. arrow_forward Preview of Example GIF (I need a solution to solve the problem in thunkable X - cuz I know there is some extentions which is avaliable for the classic version) Hope someone help me and other who may have same problem. Or You can make it by using Webviewer. Regard. ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 21, 2019, 4:23pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/3 "2019-08-21T16:23:31Z")
> [@BlueWhaleYT](#): > > 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! 😄 ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [August 21, 2019, 6:00pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/4 "2019-08-21T18:00:47Z")
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. ---
**Author:** ![renren66](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@renren66](https://community.thunkable.com/u/renren66)\ **Post date:** [August 22, 2019, 2:14am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/5 "2019-08-22T02:14:22Z")
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. ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 22, 2019, 3:24am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/6 "2019-08-22T03:24:18Z")
Thanks a lot @CBVG! The solution seems interesting… 😇😇 **I’ll now try this out 😄** ## Thanks! 😄 ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 22, 2019, 3:25am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/7 "2019-08-22T03:25:18Z")
> [@renren66](#): > > 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! 😄 ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 22, 2019, 4:54am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/8 "2019-08-22T04:54:12Z")
## Thanks a lot, @CBVG! 🤩 Your Idea is perfect, just needs some experiments 😉 * * * ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/f/2f77193ab4d975b7b288e16e7ae7b5617769562f.png) This worked really perfect for me 👍 👍 # Thanks a lot Sir!! ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [August 22, 2019, 5:02am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/9 "2019-08-22T05:02:51Z")
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. ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 22, 2019, 5:25am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/10 "2019-08-22T05:25:27Z")
> [@CBVG](#): > > 1e-10 second is way beyond what the CPU can count Okay. I’ll reduce it at my best 😊 ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [August 22, 2019, 5:37am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/11 "2019-08-22T05:37:58Z")
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. ---
**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\ **Post date:** [August 22, 2019, 6:46am UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/12 "2019-08-22T06:46:23Z")
> [@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. ### 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! ---
**Author:** ![shane.holohan1864qsw](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shane.holohan1864qsw/32/79553_2.png) [@shane.holohan1864qsw](https://community.thunkable.com/u/shane.holohan1864qsw)\ **Post date:** [August 17, 2020, 1:33pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/13 "2020-08-17T13:33:30Z")
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 ![Screenshot 2020-08-17 at 14.15.53](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/9/39c438c249ce15082c75b211929d0f7465582554.png) Here’s the blocks: ![Screenshot 2020-08-17 at 14.16.59](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/a/5a2b5788ad384815fc4bb819c67414ec0752fde5.png) In this there are two buttons to select which direction to slide the card. ![Screenshot 2020-08-17 at 14.32.56](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e91ad9dfed206305cd1ab8244805cdb4e9978e16.png) ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 12:11pm UTC](https://community.thunkable.com/t/solved-how-to-make-a-slide-horizontal-effect-on-a-column-while-disappearing-it/190607/15 "2024-11-08T12:11:50Z")