search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Best approach to make a range input #2015

Open aenfr opened 4 years ago

aenfr commented 4 years ago

Hey community!

I'm trying to make a graphic slider which has a dot selector for a range input like in the img below

bar

I want to update the value of the range and show how many points are being chosen

Not sure what is the best approach to do this without having to reload the object again and again.. any light?

Thanks in advance

bodymovin commented 4 years ago

Hi, how is this related to lottie? Is the range an animation or is it controlling an animation?

aenfr commented 4 years ago

Thanks for replying! The range input is a time remapping animation - I have 1 to 250 different values to range and I want to grab the selector and have it updated in its x position and display over what value is placed at that moment in a text layer

Danjuanlab commented 4 years ago

Can you share the aep file?

aenfr commented 4 years ago

Here we are:

Range Example

I would like to select how many points through the 'Dot Selector' shape but don't know how to do it. The dot is animated from start to the end of the bar and the amount text layer is using the timeToFrames expression in order to count it correctly.

It's possible to select it through a CSS class and make it work?

Also, I'm wondering how to make the selector be placed in whatever X Position of the bar without having to slide it in all cases.

Danjuanlab commented 4 years ago

Here we are:

Range Example

I would like to select how many points through the 'Dot Selector' shape but don't know how to do it. The dot is animated from start to the end of the bar and the amount text layer is using the timeToFrames expression in order to count it correctly.

It's possible to select it through a CSS class and make it work?

Also, I'm wondering how to make the selector be placed in whatever X Position of the bar without having to slide it in all cases.

To achieve the effect you want, you need the lottie_api library. Secondly, the implementation method is as follows: Add a slider control on the .selector and limit its value to 0-250. Map the .selector's positon to the change of position by the linear () function. The text below can directly get the value of the silder control. Add event to the .selector on the front end, and update the slider control value by converting the x position of the mouse.

You can learn how to use the lottie _api by examples/basic code and an interactive case by hernan on codepen.

aenfr commented 4 years ago

Thank you for your awesome help! I get it now. The only thing I'm still a little confused is that related to being able to move the .selector dynamically if I click on whatever spot of the range bar. Right now only works if I grab the .selector and drag it along the bar.

Danjuanlab commented 4 years ago

This is related to the custom behavior strategy of the front end. If you want to click anywhere on the slider, the ball can reach that position. For example, add click behavior monitoring to the slide, and then adjust the slider control value through code. These control behaviors must be designed by themselves. Lottie does not come with these interactive functions, it just provides such a possibility channel.