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.

© payever. All rights reserved.

English (United Kingdom)