Masterpiece Tattoo
Client:
Materpiecex
Webflow Animation
Custom CSS
Finsweet Attributes
Swiper JS
Overview
Choosing and Setting up CSS framework
The site is an super complicated site structure with Section stacking on top of each other in a 3d coordinate (depth view). Therefore, the best way to execute this layout is for each section to scale up or down depending on the screen size through View Width unit.
Challenging sections:
3D Asset to After Effect to Webflow
- Simple high-detailed 3D models Interaction with Blender, After Effect and Webflow
- Making an Interaction on Blender and export as mp4.
- reformat to lottie for Webflow Interaction
Result
Memberstack Member Hub Set up for Webflow CMS
- How to plan an structure membership content page and dashboard with Memberstack.
- List each plan price out and sort out the hierarchy for each of the plan
- Each individual Video Product will act as a single plan and every video is on the same level hierarchy
- Membership Plan will be monthly subscription and has the highest hierarchy
- Set redirect for Gated Content.
- Structuring a Gated content ID field on Webflow CMS to match the Gated Content on Memberstack
- Structuring a View button system on Webflow base on the hierarchy of the plan and set visible condition to the Gated Content
- Create a member banner and set conditional logic as above.
Nav Menu for member or non-member Users
- Nav Menu for non-member has 2 state that is trigger by Scroll Event. When scrolling to a certain percentage of the page height, a Contact CTA Button appear along side it SVG vector decoration.
- Member Hub Link also act as The Login Button since a redirect had been set up to redirect non-member user to login page.
- Nav Menu for member User applied the same logic with Scroll Event but hide the Log Out Button with is vector by Memberstack member attribute.
