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

What is Framer? Join the Community
Return to index
Joshua Tucker
Posted Dec 28 - Read on Facebook

It's been a while since I posted anything on my Dribbble, so I decided to put something up with some Framer.js stuff! I'm prototyping a task management app I wanna build so I put this together:

https://dribbble.com/shots/1860387-Drag-to-Check-Off

(Side question: any thoughts on how to adjust the border pixel size of a layer dynamically – say with a Utils.modulate? Applying the border uses CSS i.e. --> "border": "3px red solid".)

11 Comments

Seoh Char

http://framer.link/dl.dropboxusercontent.com/u/14483911/Framers/Blurr.framer.zip
you can replace 'webkitFilter' with other style property.

Joshua Tucker

Seoh Char Thanks man for showing me this! This makes sense. However, I'm still encountering issues with your example. Thoughts?

Podcast.on Events.DragMove, ->
delta = x: originX - Podcast.x
dist = Math.abs(delta.x)

checkBoxBorderWidth = Utils.modulate(dist, [0, 150], [3.25, 1], true)
checkBox.style.border = "{checkBoxBorderWidth}px #592D2D solid"

I'm printing the border in the console and it still comes out as:

>> 3.25px solid rgb(89, 45, 45)

Not to mention it is not visually changing (that I can see).

Seoh Char

"Sets the x origin for scale, rotate and skew transformations." in layer.originX of document. I think you would try this

startX = -1
Podcast.on Events.DragStart, -> startX = Podcast.x
Podcast.on Events.DragMove, -> delta = Math.abs Podcast.x-startX

Joshua Tucker

Seoh Char Here's the thing: The process I'd used above works for scale and opacity transformations. Here is the rest of the other pieces (that weren't included before):

# originX is set outside and above the Podcast.on Events.DragMove, ->
# Checkmark is a layer in my document

checkmarkScale = Utils.modulate(dist, [30, 150], [1, 1.5], true)
checkmarkOpacity = Utils.modulate(dist, [30, 150], [0, 1], true)

Checkmark.scale = checkmarkScale
Checkmark.opacity = checkmarkOpacity

These work just fine so I know that it is tracking correctly, however I am not able to change the border px width dynamically. The code I posted in my previous post shows the same process on the style.border. It doesn't seem to be changing though – do you have any thoughts on why it might not be changing?

Sorry if I'm misunderstanding your initial answer/reply :P.

Seoh Char

that works well for me like this. could you share your project?

Joshua Tucker

Seoh Char You revealed my issue to me without even knowing :).

You wrote it as "#{borderWidth}px solid [Hex color]".

I wasn't including the "#" before placing the value (in my case {checkBoxBorderWidth}. Here's how mine was written (incorrectly):

# Missing the # symbol on the front end
"{checkBoxBorderWidth}px [Hex color] solid"

That's what fixed it. When I was reading the documentation, I thought the "#" plus the variable was part of the variable placeholder, not a required piece.

Thanks for bearing with me through this!

Seoh Char

That's what I also missed :)

Joshua Tucker

Seoh Char Haha we solved it together - thanks mate! Appreciate your help.

Ives Leutenegger

Superb! Love it!

Koen Bok

Tip: it's easy to spot these by using print 'value' and inspecting the output string.

Joshua Tucker

Koen Bok I was printing the value and seeing that it wasn't changing - that's why I asked! Is that not what you are referring to?

Read the entire post on Facebook