This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Lars Petersen
Posted Aug 25 - Read on Facebook

I’m animating a volume slider in my project, sliding a thumb left to right is working, but how do I animate the ‘active’ part of the slider. E.g. moving the slider from left to right and masking (?) the active part of the slider. I have a background layer, a colored layer on top of it showing the height of the volume and the thumb on top of that. Sliding the thumb would enlarge/shrink the colored layer and show more/less of the background layer.
Thanks a lot guys!


Benjamin Den Boer

One way to do it would be to create three Layers: a "slideKnob" that controls the slider, one "slideArea" that forms the entire sliceable area, and one that fills the area; "slideProgress". Then, on DragMove, you can match the width of the progress layer with the distance dragged (event.x)

Benjamin Den Boer

In this case, the slideable area would be 200px. If you are centering the entire slider, however, keep in mind you'd need to adjust the event.x to match. (Event.x would not range from 0-200 but between 400-600 for instance, depending on how big your window is)

Read the entire post on Facebook