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

What is Framer? Join the Community
Return to index
Anton Jarl
Posted Sep 08 - Read on Facebook

Hi, I'm trying to replicate Apple.com's mobile menu. I have everything done and I'm looping through layers with the menu items and animating them with some delay to get the same effect. The for loop triggers on a click event. Now, the problem is that I want to reverse everything when clicking the menu button again. How should I do this? Everything else (menu/close button etc) is done by Events, but since I need to loop through the menu items Events isn't the best way to go.

https://dl.dropboxusercontent.com/u/599455/AppleMenu.gif

6 Comments

Nils Hoenson

Hey Anton, the way I usually go around is by reversing the order of the array you’re targeting.

You can simply reverse the order of the array you're targeting after you’re done with the initial loop. This way the exact same layers will be targeted, but in reversed order. :)

Here’s an example:
http://share.framerjs.com/30ibf311k6wj/

Hope this solves your problem!

Anton Jarl

Thanks Nils Hoenson! I did manage to get it working, but your solution was cleaner. I'll try to integrate it!

Jonas Treub

Nice job Nils! Clicking the button multiple times can break the transition though. I solved it using one state transition. Each menu item watches the transition and changes accordingly in scale and opacity. Have a look: http://share.framerjs.com/qsdo4fueckfv/

Anton Jarl

Fantastic Jonas Treub!

Jorn van Dijk

Giel is working on something similar.

Read the entire post on Facebook