Booklet

author

kalypso

Development

Animate Custom Slider

Animate Custom Slider

1. THE PROCESS
We are animating the slider using smart animate, so naming of layer is important.
Add images to groups and keep the same structure for all frames1st image = 1
2nd image = 2
3rd image = 3
4th image = 4
5th and 6th image is not visible but they are behind image 4.

This step is crucial. If you understand this, then you can simply repeat the same for the next steps
Smart animate check the structure of two frames. That is, here if you use smart animate to animate A to B, it will only animate the position change of image 3.

So to animate the slider, we have to move the position of cards?
No, that's why we use groups. We can replace the images and change the group name to cheat the process.

I know! That's so hard to understand. So check this video.

2. CREATING CARDS
The cards are same in all 6 frames, but we cheat the process by changing layer name and images.

3. LAYER NAMING
Create groups to make the naming process easy, by doing this you don't have to change the original image name.

4. SETTING UP THE FRAME
The process is same, create a copy of the frame, replace the images, change the group names.

5. PROTOTYPE
Use smart animate with drag interation, you can also duplicate this project.

More booklets by kalypso

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets