GSAP-Style
Brand & Visual Design Portfolio
Webflow
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Brand & Visual Design section of the portfolio.
Project Process:
Heavily edited a pre-made Webflow template in order to quickly learn how the builder works and understand high-complexity functioning.
Project Timeline:
1 week
Platform-Specific Skills:
Basic Functioning
Navigator, components, variables, style selectors, etc.
Effects
Scroll-triggered effects, staggered reveals, layered motion.
Interactions
Interactive hover states, motion choreography, parallax movements.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Webflow Design Interface
Web Design Portfolio
Framer
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Web Design section of the portfolio.
Project Process:
Heavily edited a pre-made Framer template in order to quickly learn how the builder works and understand high-complexity functioning.
Project Timeline:
3 days
Platform-Specific Skills:
Basic Functioning
Pages, layers, assets, style selectors, background/text flow, etc.
Effects
Scroll-based animation, easing & timing effects, layered motion.
Interactions
Side scrolling, motion choreography, parallax movements.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Framer Design Interface
LXD Portfolio
Elementor
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Learning Experience Design section of the portfolio.
Project Process:
Heavily edited a pre-made Elementor template in order to quickly learn how the builder works and understand high-complexity functioning.
Project Timeline:
3 days
Platform-Specific Skills:
Basic Functioning
Pages, layers, assets, style selectors, background/text flow, etc.
Effects
Scroll-based animation, easing & timing effects, layered motion.
Interactions
Side scrolling, motion choreography, parallax movements.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Elementor Design Interface