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

What is Framer? Join the Community
Return to index
Brandon Charles
Posted Apr 20 - Read on Facebook

Hey all! Brand new to Framer and Coffescript/JS for that matter. I'm giving the 14 day trial a whirl and loving it so far. I have somewhat of a noob question and am looking for some guidance.

I'm creating an interaction where I have a clickable object that also has a hover state. When the object is clicked it expands revealing content. At this point I want the MouseOut event to be terminated but I can't figure out how to go about it. (See attached video)

Here is some of my code -
partner["maButton_hover"].on Events.MouseOut, ->
partner.maButton_hover.animate
properties:
opacity: 0
scale: 1
curve:"spring(400,30,0)"
time: .1

partner["maButton_hover"].on Events.Click, ->
partner["maButton_hover"].off Events.MouseOut
partner["maButtonBg"].off Events.MouseOut
partner.maButtonBg.animate

Any help would be greatly appreciated.

7 Comments

Shane Brown

You could use a variable to record whether the button has been clicked, and check this before calling the animation in MouseOut.

something like

buttonClicked = false

..on Events.MouseOut
if !buttonClicked
...animate

...on Events.Click
buttonClicked = !buttonClicked

Brandon Charles

Awesome! Thank you so much Shane! This is the modified code based on your suggestion. It kinda works, but i'm thinking that I may have implemented it wrong. It's a tad buggy.

buttonClicked = false

partner["maButton_hover"].on Events.MouseOut, ->
if !buttonClicked
partner.maButton_hover.animate
properties:
opacity: 0
scale: 1
curve:"spring(400,30,0)"
time: .1

partner["maButton_hover"].on Events.Click, ->
buttonClicked = !buttonClicked
partner.maButtonBg.animate
properties:
width: 1165
height: 700
x: 5
scale: 1
curve:"ease-in"
time: .1

Brandon Charles

Screenshot to show indents

Shane Brown

Could you use the Share feature? that will upload it and give you a link you can share with everyone, and then they can play with it. That is assuming its not work related or anything.

Brandon Charles

Here is the link to the project http://share.framerjs.com/63u64c5752ck/

Shane Brown

so I fixed it up a little bit and added some comments, which should have fixed the 'bugginess', although there is still an issue with the animation on closing the pop over.

For this, have a look at setting up / controlling the superLayers. This way all the subLayers will be affected by the same animations. In Sketch/Photoshop, before importing into framer, you can make sure any layers that should be within the pop over, i.e. the content, close button etc. are within that group. Then you can animate the group, and then also animate the sub layers separately.

Otherwise you can also do this via the superLayer or subLayer properties, although doing it first in sketch / ps should be quicker.

Also look at using animationStates for some elements, as it will make it easier to manage.

http://share.framerjs.com/bpkv7axwy73h/

Brandon Charles

Thank you so much Shane, that helped a ton. I'll look into setting up superLayers next, thanks for the suggestion.

Read the entire post on Facebook