FramerJS workshop

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

for layer in [0…3]layer.backgroundColor = “modrá”

string, number, boolean, array

“ahoj”1true/false0,1,2,3…

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

for … … sketch["scroll#{index+1}"].superLayer = scroll.content

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

for … … page.addPage(scroll)

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

directionLock: true

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical/scrollHorizontal # 10. Click navBar, currentPage scrollTop

contentInset: bottom: 100

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical / scrollHorizontal # 10. Click navBar, currentPage scrollTop

scroll … scrollHorizontal: false

page… scrollVertical: false

# Set device background

# 1. PageComponent # 2. Sketch Import # 3. Loop # 4. ScrollComponents within Loop # 5. Sketch layers within Scroll.Content # 6. Add scroll as pages # 7. directionLock # 8. contentInset # 9. scrollVertical / scrollHorizontal # 10. Click navBar, currentPage scrollTop

sketch.navBar.on Events.Click, -> udělej tohle

sketch.navBar.on Events.Click, -> page.currentPage.scrollToTop( true, curve: "spring(300,20,0)" )

Congrats!