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

What is Framer? Join the Community
Return to index
Aleksandr Sood'in
Posted Oct 17 - Read on Facebook

Hi, want to implement some fine scrubbing improvement concept on the example of soundcloud's iOS app, but it appeared to be, that there're way to much things which I don't know how to do with that.

I know how to generate a set of lines with random height, but how can I mirror them later? There is no way to align them by bottom edge. May be can I dupllicate and flip them?

When x of that white vertical line is smaller than Screen.width/2 — their color switches to orange, but not by the whole line's width, but pixel by pixel. Threre're no any overlay types and I probably can't use superLayer's features.

Any Ideas? This is what I did, whithout real timeline yet. —


Jordan Robert Dobson

You can align by bottom edge that's what maxY is for.

Jordan Robert Dobson

You can adjust the layers brightness, hue and saturation. I would start with an orange line and desaturate and up brightness to get white. Then remove when you want orange.

Jordan Robert Dobson

Why would you create the bottom part later?

Jordan Robert Dobson

Just create it at the same time as you create the top one. I would bundle the top and bottom together in a layer so you can just do the colorization on the grouped layer and it applies to both.

So create your top line.

Then copy it

bottomline = topline.copy()

Scale the y

bottomline.scaleY = .5

And handle opacity

bottomline.opacity = .5

Then position it

bottomline.y = topline.maxY + 2

Jordan Robert Dobson

Keep looping on creating each line. :)

Ola Laurin

How about just creating a PNG, say 1 x 6 (for 3px lines) pixels, with the lines at correct opacity? Make a layer as big as the video and put it on top of the video. Add a style with the PNG as background repeating.

Just my two cents.

Aleksandr Sood'in

I returned to framer. Managed to create similar timeline. Also wrote and test algorythm for desaturation to turn orange to white and vice versa. Thanks to Jordan Robert Dobson But now I can't call to exact line in timeline since they're created by 'for' loop. I need to switch off desaturation for every stripe, which .x < Screen.width/2, but 'if' and 'Utility.modulate' expressions don't work. I suppose, that I need another way of creation stripes. Now it is like:

Aleksandr Sood'in

timeline = [
for i in [0..300]
topline = new Layer
backgroundColor: "#ff5100"
width: 4
height: Utils.randomNumber(48, 116)
x: Screen.width/2 + 6 * i
maxY: 1592 + 116
# superLayer: wave
topline.saturate = 0
topline.brightness = 300
botline = topline.copy()
botline.opacity = .5
botline.x = Screen.width/2 + 6 * i
botline.y = topline.maxY + 2
botline.originY = 0
botline.scaleY = .62

Aleksandr Sood'in

I wrote a test-script in another doc, where .on "change:x" (dragging object to the left) it turns orange, but in disscussed below project it doesn't work. —

Jordan Robert Dobson

Hey. Awesome! I can help you here. I'll look at your file and offer suggestions! 😊

Aleksandr Sood'in

In the perfect world I'm going to merge that into this prototype. Also dreaming about 'genie' effect, like in OSX dock, while dragging timeline up for precise scrubbing.

Jordan Robert Dobson

Here you go dude... you were pretty close... but I simplified some of the layout for you. :D

Read the entire post on Facebook