Implementing animated pricing dropdown.

Plasmic Studio Questions
1

Hi everyone, I am trying to implement price drop down on the website’s subscription section (like from 7,99 to 6,99). Sort of like in this article using CSS https://css-tricks.com/animating-number-counters/

Could you please advice

  1. whether it is possible to create such drop down animation on plasmic without coding?
  2. if CSS component is needed to be added - how can I do this?

Thanks for your help!

2

Hi, you can definitely create this! There is a new Timer component in the insert menu. I can try to share an example later of creating this.

3

Awesome! Thank you :clap: will be waiting for your further response :pray:

4

hi @yang may I kindly ask you to revert today? :pray::pray::pray: as I need to implement this solution into the project asap :pleading_face:

5

@graceful_cephalopod Please let me know if this helps! https://youtu.be/K63ce-nVoFI

6

Hi @yang, thanks a lot for the video!! :fire: Everything’s clear, but the question is how to make not the increase of numbers in timer, but decrease? I have specific case to animate numbers decrease from 7,99 to 6,99

7

Appreciate your help a lot!! :pray:

8

Also the case is that I have a subscription section of the website with slider button (frame) from monthly to annual options after which this price drop down should take place

9

Hi, you can just change the increment action to a decrement action, and change your stopping condition from checking that the number is less than a certain value to checking that it is greater than a value