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

What is Framer? Join the Community
Return to index
Ben Deter
Posted Jun 01 - Read on Facebook

I'm working on a desktop web app and wondering what the best way to handle multiple dropdowns with different open and close animations is. When layerA is clicked show layerB, when layerA is clicked again hide layerB (show and hide have different animations) If layerB is open and I click layerC to show layerD, layerB should close. I've tried working with States and chaining Animations but haven't been able to get this work. Any help would be appreciated. Thanks.

8 Comments

Randi Dumaguet

I would do it using states as well... Simplest way to go about the problem at hand. Can you post a sample?

Ben Deter

I can't post the actual working file but here is more or less what I have. So my question is, if states is the way to go, how do I add in different animation options for the open and close states and how to add in that conditional logic so layerB closes if I try to view the layerD.

Ben Deter

# ICONS

layerA = new Layer width:24, height:24, x: 950, y: 16, image:"images/profileIcon.png"

# NAV ITEM CLICKABLE AREAS

layerA = new Layer width:24, height:24, x: 950, y:16

# DROPDOWNS

layerB = new Layer width:219, height:212, x: 773, y: -3, image:"images/profileDropdownMenu.png"

# CHANGE HIDDEN LAYER OPACITY TO 0

layerB.opacity = 0

# ADD STATES TO DROPDOWNS

layerB.states.add
open: {opacity: 1}

# ADD ANIMATION

layerB.states.animationOptions =
time: .3

# SHOW DROPDOWNS

layerA.on Events.Click, ->
layerB.states.next()

Randi Dumaguet

Hmm how about something like:

layerA.on Events.Click, ->
layerB.states.next()
if ( layerD.states.current == 'open' )
layerD.states.next()

layerC.on Events.Click, ->
layerD.states.next()
if ( layerB.states.current == 'open' )
layerB.states.next()

Ben Deter

Hey Randi Dumaguet, works great. Thank you. How about adding in different animations for when the dropdown is opening and closing? Seems weird there isn't really any documentation on this.

Balraj Chana

You can use another if statement before your execute the states.next()

if layer.states.current == "down"
layer.states.animationOptions =
curve: "ease-in"
else if layer.states.current == "up"
layer.states.animationOptions =
curve: "ease-out"

Randi Dumaguet

Ben, you'll need to set the default animation options for showing the dropdown. Then inside the if statement, set the animation options for hiding the dropdown, same way Balraj did it.

Ben Deter

Awesome. Thank you!!!

Read the entire post on Facebook