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

Hi!

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!

2 Comments

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