Open Job Positions

Slider animations

Back to Videos

Steps

1. Insert a circle shape and place it above the `Previous Slide` button
2. Click the circle shape
3. Go to `Animate`
4. Go to `Interact`
5. Press `Add Trigger`
6. Select `Slider Change` as action
7. Select Slider Placeholder as placeholder
8. Press `Slide`
9. Select `First`
10. go to Effect
11. Click `Add Effect`
12. Change the duration to 500ms
13. Select Slider Change Index as trigger
14. Select Slider Placeholder as event source element
15. Select first slide as keyframe mapper
16. Press `Add Keyframe`
17. Remove the opacity on the keyframe #1
18. Click on `Opacity` on keyframe #2
19. Select `Background`
20. Change the color
21. Copy the circle shape and create 6 circles
22. Click on the second circle
23. Press on the animation
24. Change the keyframe mapper to `Number Equal`
25. Set Equal Number to 2
26. Repeat the steps for the following circles and set the equal number to 3, 4, 5 and for the last one, select `Last Slide` as keyframe mapper
27. Select the second circle
28. Go to `Animate` and `Interact`
29. Click on the created trigger
30. Click on `Slide`
31. Select `To Number` and set slide number to 2
33. Repeat the steps for the third, fourth and fifth circle with the slide number 3, 4 and 5
34. Select the last circle
35. Go to` Animate` and `Interact`
36. Click on the created trigger
37. Click on `Slide`
38. Select `Last`
39. Publish the website

Hints

Pay attention to set correct placeholder name for each animatied element. Each element should be related to the correct placeholder.