If you’ve ever given a presentation before then you’re probably already familiar with slide transitions.
In the past, we’ve covered how to create a simple slideshow app, but the navigation was pretty basic and there were no fancy transitions to move between images or slides. In this tutorial we’re going to look at how to mimic those two things in your Thunkable apps.
Finished Product
This is what the final app looks like, with the ability to swipe through the images and captions, or to have the app loop through them automatically.
Design
The “fade out, fade in” effect is made possible by layering rows. The layer on the bottom has the image and the layer on the top acts a little like a camera shutter, “opening” and “closing” to reveal the next image in the slide deck.
The final component tree looks like this.The bottom row contains the swipeLeft and swipeRight buttom, so that users can “swipe” from the edge of the screen. In the middle, the ImageRow is used to display the pictures, and on top of that the top row contains two transparent buttons, again for swiping left and right.
Blocks
The app has three variables, one for the list index and two for the lists themselves:
The buttons on the left side of the screen are used to handle what happens when the user swipes right…
…and similarly, the buttons to the right of the screen are for swiping left through the slides.
The fading function is the most interesting part of this app - it mimics the middle row fading out and then in again by changing the opacity of the top row. It’s very simple, but it looks great.
Auto-scrolling
By putting the fade out / fade in blocks into their own procedure it’s very easy to then use a timer to progress automatically.
Remix this app
Like this app?
Remix it for yourself!
https://x.thunkable.com/projectPage/5d668777b7e30f19d15c4bfc
