Skip to main content
Question

Number line slider animation

  • August 25, 2021
  • 4 replies
  • 1188 views

Rohan_Pinto

Hello everyone,

Does anyone know how to replicate an animation like the gif attached below in figma?

Thanks

bakery app

This topic has been closed for comments

4 replies

ntfromchicago

It depends. Are you wanting this to be a full user interaction (so someone could scroll through it freely) or just a thing where they swipe and that triggers a fixed animation (e.g. from 218 to 214)?

For a fully free interaction, you could do everything in that GIF except the radial compression/expansion of the numbers at the ends.


Rohan_Pinto

Hello,

I’d prefer the full interaction but i don’t mind the fixed animation either. Do you have a solution for one or both?

Thanks


ntfromchicago

I don’t have any perfect solutions, as the compression on the edges is not something easily animated (it would take a lot of work). Here are two solutions. The top is a simple free scroll, but that has the disadvantage of not lining up cleanly to the numbers. Below is more of a fixed animation, which can be done in multiple ways depending on the need. https://www.figma.com/proto/0eBPiQhl8hgNxFkga0nXjs/FF-Animated-Dial?page-id=0%3A1&node-id=10%3A655&viewport=241%2C48%2C0.64&scaling=scale-down


  • 0 replies
  • September 25, 2021

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings