Animated Sliding Menu

What is it?

animated_nav

This example uses the height properties of the new Layout component and a while loop to create this smooth scrolling effect.

Here’s a remix link:
https://x.thunkable.com/projectPage/62ea50a67f9d7d0225f7848f

To Do

Use the position property rather than the height property to slide the entire drawer into and out of view.

3 Likes

@domhnallohanlon , give me the possibility to proper use X/Y of an object inside a Layout, and I will be really excited about Layouts :smiling_face:

Can you give me an example of what you’re trying to do @mimostel ?

Would it be easier to use the Canvas component if you need to move several objects around?

Hello @domhnallohanlon . Your "what are you trying to do … "questions are my favorite part on this forum :blush: A lot of ideas appeared after these questions.
Well, let’s suppose that I’m working on a game like sudoku, so I need that when I select a cell, a “selector” appears centered on that cell, from which I can choose the number to fill in. Of course, a “static selector”, positioned anywhere outside the grid, is the easy solution and easy to implement, but it would not have the same visual effect.
Until now, I managed to accomplish this:
gif_20220730_230930
As you can see, I can’t center that "selector"perfectly, because I don’t have X/Y of the cell selected, so I just calculate selector’s position, based on other factors.
But doing so, I encounter other issue, as I stated here:
https://community.thunkable.com/t/trouble-to-align-components/1982363
I haven’t tried working with canvas yet, I’ve never done it, but maybe it’s time to start learning. I just wanted to try new layouts and how I can use them for my idea.
Thank you for your time :blush:

1 Like

Thank you @mimostel :pray:


Wow - this looks amazing!


ok, I see. Do the boxes along the edges get handled differently? Where you put 3 in the top corner for example.


Probably not the best choice of component in this case - but I wonder, why not just have the numbers 1 - 9 along the bottom of the screen? The user can select their cell and then choose the number to populate it with from the keyboard. You could even have an “easy” mode where the numbers that are already in that 3x3 are greyed out? Just a suggestions!

1 Like

Yes, you got it… If you select a cell that will result in selector going outside main grid,will force “selector” 's layout to align to large grid’s margins (to not be outside the main grid).
In fact I have only 2 layouts: large grid (with 1 button cloned until i get 9x9 grid) and a little grid, let’s call it “selector” with 1 cloned button until we get 3x3 grid)

For at least 2 reasons: 1st of all, because I find it much more attractive in terms of visual effects that “selector” flourish on top of the cell selected.
And 2nd, because when I have an idea, I keep struggling until I’ll get it done (@muneer knows how much trouble I give him with my questions :rofl: ). Maybe other idea will be better, and I implement it… But at least I will know that I can implement my idea too in other later projects.

4 Likes