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

What is Framer? Join the Community
Return to index
JinJu Jang
Posted Jan 12 - Read on Facebook

Update!

Thanks to Sandro ⎋ Poli 's awesome help, I could complete this prototye! :)
https://framer.cloud/MXwkf/

Now the zipper works much seamless, and I added little bit of extra code to make it natural (Made zipteeth to gradually split away from the end of the zip)

Thanks for awesome feedback & reactions! <3

================
Hi Everyone,

I'm making a weird Slide to unzip(!) prototype for fun.
It was fun until I realise it's hard to translate the X position of the slider as an index number of an array.
(Still works when you slide really slowly, though! 🤔)

I don't feel confidence with using Utils.modulate for this interaction. But that was the only way I know. Sighs.

Would be greate if you can give a tip & hint to help me out from this annoying problem!

16 Comments

Jeongmin Kim

It seems to move perfectly like real zipper... even twisted :)

Jeongmin Kim

I used just simple loops and conditionals. I fix twist problem but your version looks way natural.

Sandro ⎋ Poli

It's strange because when you slide from left to right it works perfectly even if you slide it fast but I noticed that it does not react the same when you slide from right to left

Andrey Yanovskiy

sweet

Hoffer Gábor

It's because it runs as good as the framerate... (I tried with intetrval too, but that failed as well) - a solution would be to complement this with a check that the previous ones remained in place or moved and animate them also if they didn't move...

Tyler Angert

I wonder if this would work using a linked list

Ed Monterrubio

You're genius Jin! Thank you for sharing.

Jordan Robert Dobson

#framercode

Maksim Okala-Kulak

Isn't it possible to create a dummy that follows cursor, and make the powl follow that dummy with speed limit?

German Bauer

Very clever idea

James Heredia

could be a cool feature for a captcha, neat though!

Chang CJ

it is so material design, I like it.

Sigurd Tapio Mannsåker

Nice! As a quick tip, you dont need to translate it into an array index really. You can just use Array.filter() or filter manually somehow to check each layers x position. Maybe you've already tried it, I'm on mobile so haven't read the comments. Just my two cents :)

Ee Venn Soh

Here is another example done with GSAP + SVG. http://codepen.io/chrisgannon/pen/aOJxeo/

Igor Kulemza

Good idea, i like it!

Read the entire post on Facebook