Tyrone Tudehope
blog.tyrone.dev

Looping Chained Popmotion Actions

  • 22/06/2019 - Published

Popmotion has a nice API for defining animations, and some actions include a property to loop the action:

Loop forever
tween({
  from: {opacity: 0},
  to: {opacity: 1},
  duration: 2000,
  loop: Infinity,}).start(el.set)

This will replay the animation for… Infinity:

However, with more complex animations, we can make use of the Action’s start method callbacks. For example, if we’d like to create an animation which fades something in, displays it for a few seconds, then fades out again, and repeat ad infinitum, we can wrap it in a function and which calls itself from the complete() function:

Loop chained actions forever
const animation = chain(
  // Fade in
  tween({
    from: {opacity: 0},
    to: {opacity: 1},
    duration: 500,
  }),
  // Pause
  delay(2000),
  // Fade out
  tween({
    from: {opacity: 1},
    to: {opacity: 0},
    duration: 500,
  }),
  // Delay fade in
  delay(500),
)

const runAnimation = () => {
  animation.start({
    update: el.set,
    complete: runAnimation,  })
}

runAnimation()

Leave a comment