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

What is Framer? Join the Community
Return to index
Stanislav Grinapol
Posted Dec 18 - Read on Facebook

I am trying to create a function inside of another function on click, and it does not seem to work. Nothing breaks but it does not do anything either.

What I would like to do is make a list using an array that is nested inside of a container element, and make the list clickable so that when it extends it reveals a list behind it.

Basically this

https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6UjZvd0w1MmdQVWs/patterns_navigational-transitions_parent-to-child_list-01_xhdpi.webm

But 4 layers deep.

Here is the full code: any suggestions

Background = new BackgroundLayer backgroundColor: "#f6f6f6"

# Placing all fields within a container
Container = new Layer backgroundColor: "transparent", width:1080, height:2000
Container.center()
#Container.style.padding = "10px 0 0 0 "

# 10 Fields
for colNumber in [0...9]
Field = new Layer
width:1080
height:240
backgroundColor: "#fff"
shadowY: 2
shadowBlur: 5
borderRadius: "6px"
y: (colNumber) * 242

Field.shadowColor = "rgba(0, 0, 0, 0.25)"
Field.superLayer = Container
Field.centerX()

# Each field gets its own Highlight and Shadow animation
Field.on Events.Click, (event, Field) ->

Field.bringToFront()

Highlight = new Layer
width:10, height:10, backgroundColor: "#eeeeee", borderRadius: "50%", opacity:0
Highlight.superLayer = Field
Highlight._prefer2d = true

# How to create a subset of list items so that when the user clicks on a lsit item it will reveal the child list
for newColNumber in [0...9]
SecondaryField = new Layer
width:1080
height:240
backgroundColor: "#000000"
shadowY: 2
shadowBlur: 5
borderRadius:"6px"
y: (colNumber) * 242

Field.shadowColor = "rgba(0, 0, 0, 0.25)"
SecondaryField.superLayer = Field
SecondaryField._prefer2d = true

# Matching the Highlight position with the click position
Highlight.x = event.clientX - Container.x - Field.x - (Highlight.width / 2)
Highlight.y = event.clientY - Container.y - Field.y - (Highlight.height / 2)

highlightAnimation = Highlight.animate
properties:
width: Field.width + 40, height: 1080, opacity: 1, x: -10 , y: Field.height/2 # Half of new height & half of Cursor height
curve: "ease", time: 0.25

# Fade & Reset Highlight
highlightAnimation.on "end" , ->
Highlight.animate
properties:
opacity: 0
curve: "ease", time: 0.1
utils.delay 0.1, ->
# Resetting the Highlight properties
Highlight.width = 160
Highlight.height = 160

# Animate Shadow
fieldAnimation = Field.animate
properties:
opacity: 1, shadowY: 10, shadowBlur: 16
curve: "ease", time: .1

# Reset Shadow
fieldAnimation.on "end" , ->
Field.animate
properties:
y: 0, height: 2000,
curve: "ease", time: 0.4

15 Comments

Marcelo Eduardo Oliveira

Can you share the code on framer link? That will make it easier to help you! :)

Stanislav Grinapol

Hi Marcelo Eduardo Oliveira I am not sure how to do that.

Marcelo Eduardo Oliveira

Ah, sorry: so, copy your code and paste here:

https://gist.github.com/

It will generate a URL for you. Copy the URL ( from the browser address bar )

And paste it here:

http://framer.link/

The, just drop the final link created by framer.link here and I will be able to open the project straight on my studio. I will do the same if I manage to fix / help you!

Stanislav Grinapol

Oh thanks

Stanislav Grinapol

Marcelo Eduardo Oliveira, not sure If I did this right but here goes

Mike Feldstein

I notice that you reference SecondaryField on line 45 outside of the loop that creates SecondaryField. With this syntax you're basically only going to be doing anything to the last SecondaryField. You need to make sure it's indented properly.

Stanislav Grinapol

Mike Feldstein thank you for your response, I am both new to framer, coffeee script and JS and not sure how to do what I am trying to do, can you provide an example? actually line 45 works fine, it creates a circle that animated in and disappears. The area that I am having trouble with is actually between line 33 and 42, this would Ideally create a secondary list of items, that are to be masked under the list item that is being clicked. (at least in theory in practice I don't know how to achieve it)

Mike Feldstein

CoffeeScript uses indentation to break out of loops. This is kind of a stumbling point I see for people using coffeescript for the first time.

Mike Feldstein

sorry for the multiple posts, i keep hitting enter.

Basically look at what i did to line 43. You'll see how its indented at the same level as where you created SecondaryField, 1 tab-stop more than where you start the for loop. This means it will happen inside the for loop, 10 times, and will add each layer to the Field, not just the last one.

Its good to look at the generated javascript to see the difference

Stanislav Grinapol

Mike Feldstein I tried copying and pasting what you built on Github, does not seem to be any different than what I originally had, besides the comment line indentation so I am confused. Sorry

Mike Feldstein

I didn't look too hard at the code that just stuck out to me. Here's how they compile differently if you're interested: https://gist.github.com/msfeldstein/a2eeb5a011f112902a12

Stanislav Grinapol

Mike Feldstein I understand what you are saying, but that still does not create a secondary list, what I am wondering is weather my logic is flowed.

Stanislav Grinapol

Mike Feldstein Thank you for your help, you were partially right, the lines needed to be indented, but more importantly I was making a wrong call in line 42 that did the trick.

Read the entire post on Facebook