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

What is Framer? Join the Community
Return to index
Greg Woods
Posted Jun 28 - Read on Facebook

Hello, can you offer any tips please: I have a layer 'donetap' as a sublayer of another 'keypad'. I want to attach an event to donetap to animate 'keypad' on tap. It is not working. Here is the code. Any ideas please?

PS. I suspect it something to do with superLayer. However, the reason donetap is a subLayer of keypad is so that it only appears on screen when the keypad appears. If you have any other ideas, I'm keen to hear

thanks agaib

donetap = new Layer
superLayer: demo.keypad
# 'demo' is imported sketch file
x:0, y:0, width:280, height:200

donetap.on Events.Click, ->
demo.keypad.animate
properties:
y:100

13 Comments

Balraj Chana

It looks fine to me. What error message are you getting? How are your indents? http://share.framerjs.com/c76qb1n5cgix/

Greg Woods

Hi Balraj, there are no errors. But there is also no event being triggered when I tap donetap layer

Balraj Chana

Awesome, does my example solve your issue? If not, would it be okay to share your file?

Greg Woods

Hi Balraj: I'd appreciate any help., Here is the file: https://drive.google.com/file/d/0B0PRy1f3tidrRzFNZFh2MTM3ZG8/view?usp=sharing

Greg Woods

I've added comments in the code where I am stuck. They are prefixed with ???. Any help you can offer would be ace.

Balraj Chana

Greg - Thanks for sharing the file. I've had a look at your code all you have to do is place overview.sendToBack() on line 6. It was just a index ordering issue.

You have 2 artboards: overview and newlist. Both do not have a superlayer and overview.index = 2 and newlist.index = 1. This places overview in front of the newlist artboard and will block interaction even if you reduce the opacity. By using the sendToBack() function, you're placing the layer which requires interaction at the front. Hope that explains it!

Greg Woods

This works a treat. Thanks Balraj.

Greg Woods

BTW: making my 'tint' layer a layer group retained its hierarchy when importing(rather than flattening it) and prevented my product images showing with weird white backgrounds. This was a weird glitch that was giving me huge ball ache (huge ache rather than huge balls!). Hooray - its working now. Thanks again.

Balraj Chana

You're welcome Greg. Your group structure in sketch is just as important as your structure in Framer. Try to anticipate how the interaction will pan in Framer when you're designing in sketch. From my experience, when it comes to overlays, subpages, modals, popovers, popups etc it's easier to manage when everything is positioned in the same artboard or group. Hope that helps!

Greg Woods

Morning, Balraj Chana. Would you be kind enough to take a look at the latest development on this project I have been working on and you have helped me with? I have an issue that I am struggling with. Basically, I would like to hide the product images that appear after tapping the done button. The source file can be found here and I will add instructions on how to do the journey in the top of the code. Really apreciated if you can lend some advice as I'm really stuck. Thanks Greg Woods https://drive.google.com/file/d/0B0PRy1f3tidrNjNPMUc3NjZMNGs/view?usp=sharing

Balraj Chana

Morning Greg! Sure, you can simply reduce the opacity of all products when you click the 'done' button. Just add 'products2.opacity = 0' on line 281.

Greg Woods

thanks Balraj - this works a treat!

Greg Woods

Balraj Chana: Just one other thing that I'm struggling with - I've tried a different animation for the nav bar where there is a neat vertical push. However, I've come unstuck again - sorry. Do you have any suggestions for what I can do to not make header2_mask sit at the top. I want it to sit below tint, textedit and keypad, similar to my last wishlist3 version above. I had made it a superlayer to mask header2 and allow the cool push up but it seems to have made it jump right to the top meaning it sits above everything and messes up the remainder of the demo. Any ideas please? Really appreciate your help and hope you don't mind. Here is the link: https://drive.google.com/file/d/0B0PRy1f3tidrSGR2MlVaWWppbUU/view?usp=sharing

Read the entire post on Facebook