I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Bottom Navigation to Footer Animation in Framer
August 15, 2023
Tutorials
After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.
Step 1
Start with a navigation component, set Position to Fixed with a Bottom value of 0.
Step 2
Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.
While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.
Go back and set your Component to Fit Contents.
Step 3
Now create your footer design as a secondary variant within your navigation component.
Add some additional footer content.
Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.
Step 4
Make sure the navigation is centered and still Fixed to the bottom at 0.
Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.
Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.
You’re done!
Sign up below to be notified about more Framer tutorials.
Bottom Navigation to Footer Animation in Framer
August 15, 2023
Tutorials
After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.
Step 1
Start with a navigation component, set Position to Fixed with a Bottom value of 0.
Step 2
Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.
While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.
Go back and set your Component to Fit Contents.
Step 3
Now create your footer design as a secondary variant within your navigation component.
Add some additional footer content.
Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.
Step 4
Make sure the navigation is centered and still Fixed to the bottom at 0.
Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.
Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.
You’re done!
Sign up below to be notified about more Framer tutorials.
Bottom Navigation to Footer Animation in Framer
August 15, 2023
Tutorials
After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.
Step 1
Start with a navigation component, set Position to Fixed with a Bottom value of 0.
Step 2
Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.
While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.
Go back and set your Component to Fit Contents.
Step 3
Now create your footer design as a secondary variant within your navigation component.
Add some additional footer content.
Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.
Step 4
Make sure the navigation is centered and still Fixed to the bottom at 0.
Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.
Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.