.

1. FramerJS workshop

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

10. # 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

12. # 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

19. # 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

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

21. string, number, boolean, array
“ahoj”
1
true/false
0,1,2,3…

22. # 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

26. # 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

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

28. # 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

29. for …
…
page.addPage(scroll)

31. # 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

32. directionLock: true

34. # 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

35. contentInset:
bottom: 100

37. # 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

38. scroll …
scrollHorizontal: false
page…
scrollVertical: false

39. # 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

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

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

43. Congrats!