Jetpack Compose — Pendulum Effect

Paulo Pereira
Mar 15 · 3 min read

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!

Usage:

Result:

Repository:

https://github.com/pauloaapereira/Medium_JetpackCompose_PendulumEffect

LinkedIn:
https://www.linkedin.com/in/paulo-pereira-001615153/

Twitter:
https://twitter.com/pauloppereiraa

If you enjoyed it, and if this helped you, you can also consider paying me a coffee. :]

Thank you!

Nerd For Tech

From Confusion to Clarification

Paulo Pereira

Written by

Hello! I am Paulo and I’m 23 years old. I have around 3y and half of experience as an Android Developer. Associate Android Developer certified by Google

Nerd For Tech

An Educational Media House

Paulo Pereira

Written by

Hello! I am Paulo and I’m 23 years old. I have around 3y and half of experience as an Android Developer. Associate Android Developer certified by Google

Nerd For Tech

An Educational Media House

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store