[vc_row type=”full_width_background” full_screen_row_position=”middle” full_height=”yes” columns_placement=”bottom” scene_position=”center” text_color=”light” text_align=”left” top_padding=”8%” enable_gradient=”true” color_overlay=”#0d071e” color_overlay_2=”#0d071e” gradient_direction=”left_b_to_right_t” overlay_strength=”0.95″][vc_column centered_text=”true” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/6″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column centered_text=”true” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ font_color=”#ffffff” column_shadow=”none” width=”2/3″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][split_line_heading]

Daily challenge

of design and prototype

[/split_line_heading][vc_row_inner column_margin=”default” bottom_padding=”80″ text_align=”left”][vc_column_inner enable_animation=”true” animation=”fade-in-from-bottom” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid” delay=”450″][nectar_btn size=”large” button_style=”regular” button_color_2=”Accent-Color” icon_family=”none” url=”#1-10″ text=”See the challenge” margin_top=”10″ margin_right=”10″ margin_left=”10″][/vc_column_inner][/vc_row_inner][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/6″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”11-20″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 11. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1505237499494{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Parallex scroll in image gallery

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]This was a bit challenging to me since it requires playing with Array. What I have learned is array.push(1), array.splice(array.indexOf(a),1) and Color.mix(“#AABCD8”, “#434E5C”, true, “husl”), Utils.randomImage(). and also when to use “this.” in the for loop. Try scroll and see the loading animation if it’s natural.[/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/ufVrA” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 10. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1503599535844{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Image loading animation as you scroll

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]This was a bit challenging to me since it requires playing with Array. What I have learned is array.push(1), array.splice(array.indexOf(a),1) and Color.mix(“#AABCD8”, “#434E5C”, true, “husl”), Utils.randomImage(). and also when to use “this.” in the for loop. Try scroll and see the loading animation if it’s natural.[/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/YOGPs” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 9. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1503350799530{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Header reaction on scroll move + card detail

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]Today, I was reviewing what I have learned from the past daily challenge. Try scroll and click the first item. [/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/opvlK” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 8. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1503033736048{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Expand and collapse menu

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]The goal of this exercise was to make reusable component if I build similar interaction in the future. This is one of those attempts, making my own Framer library — Expand and collapse menu
Try click Jose Edwards[/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/bUWxj” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 7. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502771230896{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Recreate Apple Music with audio player module

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]Time for a little bit more complex prototype. This prototype is for recreating Apple Music with audio player module. I learned a lot from this prototype.
– Workflow from Sketch to Framer
– How to use module
– How to pull real date data
– Play with Design module in Framer

For the tutorial, please go here by Tes Mat
What makes this project enjoyable is how much I am learning every day.[/vc_column_text]

[/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/mYzjL/” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 6. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502400220685{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Play with Gradient module with a real data

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]I wanted to understand how I can use Gradient module by pulling actual time data. As you move circle controller, the gradient is moving according to x position the controller. I learned Utils.modulate and how to pulling actual time data.

Play with the circle at the center and press the button below. It will show actual time. [/vc_column_text]

[/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/FoHcZ” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 5. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502300521867{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Card interaction with a transition to the detail info

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]Today, I get myself familiar with Page Component in Framer. And thought about how I can prototype smooth transition from a card UI to detailed information.

Try swipe between two cards and tap Flyknit card. [/vc_column_text]

[/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/IxcNL” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 4. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1503509982586{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Selecting behavior by using Array and Loop

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]This prototype looks simple but the goal was learning Array and loop in Coffeescript. This list is easily expandable with very simple modification in code without redundancy. [/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/sFWHU/” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 3. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502248253981{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Page component and setting up prototyping workflow

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]I tried to use Page Component in Framer. This also helped me to set a solid workflow from Sketch to Framer. Since Design feature in Framer has a lack of features I need yet. Especially parent and children relationship is a bit trickier than a Grouping concept that I am familiar with. But I am pretty sure I will be familiar more and more as I spend time more.

Try scroll cards and click Logan movie poster[/vc_column_text]

[/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/MkjUL/” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 2. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502247627623{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Hover and expand

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]I have been thinking how the design can reveal more information when user hover over. This is one attempt of hover and expand exploration. I have learned how to use state effectively.[/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/YeduC/” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” bg_color=”#ffffff” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”7%” id=”1-10″ overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-4-percent” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”Day 1. ” font_container=”tag:h5|font_size:14|text_align:left|color:%233452ff|line_height:24px” google_fonts=”font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1502244227528{margin-top: -8px !important;margin-bottom: -8px !important;}”]

Parallex scrolling with blur effect

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin=”default” text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″ column_border_width=”none” column_border_style=”solid”][vc_column_text]I tried to experiment with parallax scrolling with blur effect at the top. I learned how to use Util.modulate function today. Try scroll and click Happy Tears thumbnail. [/vc_column_text][/vc_column_inner][/vc_row_inner][nectar_btn size=”small” open_new_tab=”true” button_style=”see-through-2″ hover_text_color_override=”#ffffff” icon_family=”none” url=”https://framer.cloud/RaHCk/” text=”Prototype link”][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/4″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][/vc_column][vc_column column_padding=”padding-2-percent” column_padding_position=”left” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” offset=”vc_hidden-sm vc_hidden-xs”][vc_column_text][/vc_column_text][/vc_column][/vc_row]