Swipe Animation Effects on Shayari App with Kodular

In this tutorial I will show you how to add Swipe Effect on any App. I already posted 2 tutorials about how can you create dynamic shayari app and how can you add swipe to next and previous on this app. Before follow this tutorial you should follow that tutorial first :

  1. How to Create Dynamic Shayari App – https://thetechstudy.in/create-dynamic-shayari-app-using-spreadsheet/
  2. How to Add Swipe to Next and Swipe to Previous on Dynamic Shayari App – https://thetechstudy.in/swipe-to-next-and-previous-system-in-dynamic-shayari-app/

After following these two tutorials, now you have created a new Dynamic Shayari or Jokes App with Swipe to Next and Swipe to Previous. Now, to give your app more beautiful and professional you should add a swipe effect when someone swipe or click next or previous into the Shayari (or other) app.
When you follow the 1st Tutorial (How to create Dynamic Shayari App) you can see I have created a Screen named Main, where all Shayari or Jokes will appear. So, in the Main screen I have to add this Swipe Effect, so just go to the Main screen (if you are using my AIA file).

Main Screen

Design

Just Drag Animation Utils from Utilities , that’s it, now see the Blocks

Blocks

Here you can set what you should do with Swipe Effect, if you want the Swipe effect only when an user swipe left or right then add the block to Gesture block like below

But I want to add the Swipe effect to everywhere, when an user swipe and also when an user click on Next or Previous button, so I have added the blocks to Procedure Back and Next like below

Like this!

For swipe type of effect you can use Animation Util’s Overshoot Horizontal Block. Start and End positions are direction like 180 means very left side and -180 means very right side, and 0 means center of the screen. Duration is in milliseconds (effect for how much time) and you can leave tension as 0, where a normal effect will show, if you increase the tension like I did 15, then it will show a bounce type effect when swipe.

Video Tutorial

 

Download

Leave a Reply

Your email address will not be published. Required fields are marked *