Calendar Tutorial in ProtoPie, Part I
A quick tutorial on how to recreate a calendar app with parallax images in ProtoPie.
![Rob Cleaton](https://cdn.sanity.io/images/qyzm5ged/production/c5e507673953206e04044d6728cf3f973744a23a-120x120.png/Rob-Cleaton-Cookpad-Lead-Mobile-Product-Desginer.png)
![Calendar Tutorial in ProtoPie Part I thumbnail](https://cdn.sanity.io/images/qyzm5ged/production/32d0d1487dbc1ab63f907f785f2930968e8c79eb-980x550.png/Calendar-tutorial-in-ProtoPie-part-1-thumbnail.png)
Over the course of the past few months, I’ve been keen to try out ProtoPie and teach myself some useful techniques I can apply to my work in the future.
There have been many different prototype tools over the years and I’ve used a lot of them. All have many pros and cons, but I’ve been eager to find one with a relatively small learning curve (looking at you Framer) that could be super powerful in taking UX and UI designs to the next level.
In this tutorial, we’ll go through creating a simple Calendar UI prototype using PrototPie. I would recommend downloading ProtoPie for free and this should take about 20mins to finish.
![A simple Calendar UI prototype gif](https://cdn.sanity.io/images/qyzm5ged/production/5babecfdba7e9c798c051d675730ffc552075e69-2972x1708.gif/A-simple-Calendar-UI-prototype-gif.gif)
1. Set the scene
Basic ProtoPie file without the interactions
- Create your vertical monthly blocks, I’m using heights of 532px for ease of demonstration, (can all vary if that's your thing) and a gap of 135px between these blocks.
- Group the months into a vertical scroll
- Add square background images and place them at the bottom of the Scene, with their top edge touching the bottom edge.
2. Creating the Calendar vertical scroll
As my 1st image will be on the Scene from loading I’ll follow a different pattern here, you can group all them together in a container in the layers to keep things tidy.
Image container
- x = 0 / y= 532px
- height = 375px / width = 375px
First image
- x = 0 / y= 0
- height = 375px / width = 375px
Second, 3rd, 4th image
- x = 0 / y= 135px
- height = 375px / width = 375px
![The number in the red roundel will display the scroll position of the scroll gif](https://cdn.sanity.io/images/qyzm5ged/production/93d884dd30c93ff838ade6e2701f24e980dda34a-720x1092.gif/The-number-in-the-red-roundel-will-display-the-scroll-position-of-the-scroll-gif.gif)
3. Display a scroll position display (Optional)
This will save you a lot of time and super easy to add to save time with finessing if things get complicated.
- Add a Text layer
- Add a Detect trigger to the vertical scroll and selecting Scroll from the dropdown
- Select Formula from the Content dropdown and add your Scroll with the .scrollOffset
![How to display a scroll position display step1](https://cdn.sanity.io/images/qyzm5ged/production/e367550fac2379b17ff06afc67cacacfa6b3dfe4-453x214.png/How-to-display-a-scroll-position-display-step1.png)
![How to display a scroll position display step2](https://cdn.sanity.io/images/qyzm5ged/production/49a959ad806ae9126ee2b03ca32e04460589b6c0-548x214.png/How-to-display-a-scroll-position-display-step2.png)
4. Parallax Monthly images
Add a Chain trigger to your vertical scroll and select Scroll from the dropdown.
![Add a Chain trigger to your vertical scroll and select Scroll from the dropdown](https://cdn.sanity.io/images/qyzm5ged/production/093521cb9d5eb31ba7179716f921501e19fe92bd-512x526.png/Add-a-Chain-trigger-to-your-vertical-scroll-and-select-Scroll-from-the-dropdown.png)
Add a Move response to this Chain and now we’ll add your images one-by-one.
![Adding Dhalism image](https://cdn.sanity.io/images/qyzm5ged/production/f88ef683a53719b14f32db3000b7de5b2f5f4655-390x184.png/Adding-Dhalism-image.png)
![Adding Blanka image](https://cdn.sanity.io/images/qyzm5ged/production/c45458ae380ac7e0d225dcb9fcb8d4979806e1c5-411x184.png/Adding-Blanka-image.png)
![Adding MBison image](https://cdn.sanity.io/images/qyzm5ged/production/16bb1d13036137f6e2bd18725ea836f7159e9e93-653x318.png/Adding-MBison-image.png)
1st image
As this is placed on the Scene from load, this will follow a slightly different logic.
- 532px (list scroll position before image) = 135px (Y position of image at bottom of the scene)
- 1334px (list scroll position after image) = -908px (Y position of image of the top of the scene)
2nd image
What we need to add here, is to tell the Prototype the relationship between the positions of the list scroll and the image. This is what ProtoPie calls Range.
Scroll position Range
- 532px (list scroll position before image) = 135px (Y position of image at bottom of the scene)
- 1334px (list scroll position after image) = -908px (Y position of image of the top of the scene)
![532px is the start of the scroll](https://cdn.sanity.io/images/qyzm5ged/production/a81057a7f93dd4ad4c5c30b7de297ae00739c1e8-442x436.png/532px-is-the-start-of-the-scroll.png)
![135px is the starting Y position of the 2nd image](https://cdn.sanity.io/images/qyzm5ged/production/9d849de0f7f127a2c06956b489457b36c3b72f2e-358x437.png/135px-is-the-starting-Y-position-of-the-2nd-image.png)
![1334px is end position of the scroll](https://cdn.sanity.io/images/qyzm5ged/production/0b119b384f4c8710829bb3e43e855d09bbc10d17-653x609.png/1334px-is-end-position-of-the-scroll.png)
![132px is the ending Y position of the 2nd image](https://cdn.sanity.io/images/qyzm5ged/production/768320b4f14b688a407f42578fe44f76a62adb5e-653x631.png/132px-is-the-ending-Y-position-of-the-2nd-image.png)
![Scrolling down the calendar gif](https://cdn.sanity.io/images/qyzm5ged/production/60f35b5d0831aef8195933235d198a8cac657b75-2132x1724.gif/Scrolling-down-the-calendar-gif.gif)
I hope you found this tutorial helpful. In the next coming weeks, I’ll cover the following.
- Fab/Action Button
- Burger Menu
- Monthly horizontal scroll