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

What is Framer? Join the Community
Return to index
Nadine Han
Posted Jul 10 - Read on Facebook

Any chance to set the origin of the width ? Don't want to expand the element from it's left corner but from it's right.
Trying to make some "swipe to delete" thing, with a transparent layer....

12 Comments

Benjamin Den Boer

Not when animating the width, but you could use the scale property instead, which does allow you to specify the transform origin.

Nadine Han

The width should equal the dragged distance of the other layer. And to "delete" the layer, the user has to drag from the right to the left...like the Google Mail App

Алексей Кольченко

Nadine, please check the CodePen. Is it what you need? http://codepen.io/akolchenko/pen/BaKcu

Nadine Han

No, sorry. Meant something like this http://i.stack.imgur.com/VrQ1W.png
But I've got a layer on top, with only 60% opacity...that's my problem :(

Nadine Han

I've got an inner-padding, so I can't place the underlying layer outside the screen. And that's how they did it in the example or not ?

Florian Pnn

You can place it under I guess?
If you can upload your current framer project it will be easier

Nadine Han

This is what I want to achive. And I can't place it under, because it's transparent. If it would be opaque, there would be no problem :)

Florian Pnn

Here is a quick example that you can fine tune for your need :)
https://dl.dropboxusercontent.com/u/4822469/nadia.framer.zip

Алексей Кольченко
Nadine Han

Thank you so much Florian Pnn, maybe you can explain what all the numbers and the first section is for ? I really don't get it :D
EDIT: Ok, got it to work, but I don't know how ^^

Florian Pnn

Ok I'll explain in details :

line 1 to 5 : I used Sketch generator so this code is automatically there.

line 8 to 14 : This function map a value to another. A copy/paste from Cemre article : This function, given any value within the range [low1, high1], will produce its equivalent value in the range [low2, high2].

line 17 and 18 : Just a tweak to be able to write redCell instead of nadiaLayers["redCell"] every time.

line 21 to 27 : I display the redCell but reduce its size to 0px. I position it at the end of the current shape and also change the background position to stick to the right instead of center.

line 29 and 30 : I activate the drag option on the cell and disable the y translation.

line 32 to 34 : I mapped the translation on x from the cell to the width and the x position of the redCell. With that the redCell will expand and move exactly at the same speed than the cell.

Read the entire post on Facebook