Howto: Loop or Repeat an Animation

Animation
53

Looping a certain number of times WITHOUT JavaScript:

How to loop your animation 2 times within Hype and without any JS:

  1. Create a primary animation on its own timeline (not in Main Timeline)
  2. Create a secondary animation that resets the placement of elements (from primary end point to primary start point)
  3. In Main Timeline, add 3 timeline actions: start primary, start reset, start primary

Voila! If you want more loops, add more start-resets and start-primarys. What's nice about this approach over JS is you can be more creative on how your elements exit before the animation starts again.

loop 2× sample.zip (4.5 KB)

loop 3× sample.zip (4.5 KB)

4 Likes