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

What is Framer? Join the Community
Return to index
Patryk Adaś
Posted Jun 23 - Read on Facebook


I am pretty new to framer.js and javascript, in general. Therefore I'd like you to help me.

I am trying to prototype attached png. The slider on the bottom works a little bit like a timeline in After Effects - I can move the whole element, but I can also change its width to zoom in / out the screen above the slider.

I am thinking about coding it and that's my thought process:

1) I need to corelate the width of slider element to width of elements seen above. How to make them stack accordignly? Should I use array?
2) I assume that my slider element should consider three elements:
a) Parent, that is movable
b) Left 'dragger'
c) Right 'dragger'
Is that correct?

Any advice would be way more than helpful!


Benjamin Den Boer

Hiya Patryk Adaś! This looks cool. Let's see.

1. Right — this can be quite easily achieved by using the SliderComponent and modulating it's value to change the x position of your timeline above.

2. A SliderComponent comes with only 1 knob by default. You can recreate it from scratch too ofcourse, and the source code is available to inspect and tinker with as well.

2. a/b/c — yep, sounds right. In this case, you could create two draggable layers, both constrained to the same area (constraints) and then create a layer in between them that serves as the (purple) fill. The basic principle is that you update the width whenever you change the x position of any of your knobs (change:x event). Then, you can individually modulate the x movement to update the timeline above.

Patryk Adaś

Benjamin Den Boer sorry to overabuse you, hope you don't mind!

Read the entire post on Facebook