Jetpack Compose — Pendulum Effect

Paulo Pereira

Published in

Nerd For Tech

3 min readMar 15, 2021

On this article, I’ll show you how to reproduce an infinite Pendulum effect on any composable you want.

To make the Pendulum idea simple, let’s think this way:

When a Pendulum is swinging, it basically goes from left to the right and vice-versa in the X axis, and up and down in the Y axis.

In this case, we just need to find a way to represent this motion from startX to endX , and from topY to bottomY in an animation.

As you’ve seen in my last article, where I have covered the Pulsating Effect animation, we can keep an infinite animation running, while changing one or more float values.

So, if we animate the x and y coordinates of a composable and make it change between the ranges that we want the Pendulum to be swinging, we have a working Pendulum!

Let’s get into work:

Let’s start by declaring the infiniteTransition that we will be working with.

InfiniteTransition is responsible for running child animations. Child animations can be added using InfiniteTransition.animateColor, InfiniteTransition.animateFloat, or InfiniteTransition.animateValue. Child animations will start running as soon as they enter the composition, and will not stop until they are removed from the composition.

val infiniteTransition = rememberInfiniteTransition()

Then, since we need to identify the x and y ranges that we want the Pendulum to swing, we will be using a composable called “BoxWithConstraints” to be able to access its maxWidth and maxHeight.

Now, as identified in the previous image example, we need to define the variables startX, endX, topY and bottomY.

These will correspond to the position in percentage, relative to the maxWidth and maxHeight identified in the BoxWithConstraints.

Now that we know the ranges we want the Pendulum to be swinging, we just need to animate it.

X value animation:

The Pendulum X coordinate will be swinging:

From start (maxWidth * startX) to end (maxWidth * endX)
Infinitely (“infiniteRepeatable”)
By a specific “swingDuration” passed as an argument (shown below)

Y value animation:

The Pendulum Y coordinate will be swinging:

From top (maxHeight * topY) to bottom (maxHeight * bottomY)
Infinitely (“infiniteRepeatable”)
By a specific “swingDuration” passed as an argument (shown below), divided in half. If it was not divided in half, it would not act as a pendulum (would continue to go down), since it would take the same time as the X axis to reverse its direction.

Then, to apply the animation values, we add another Box composable, and use its offset modifier function to change its coordinates.

Inside this box, there will be our content to be swinging like a cool Pendulum!