SCROLL

pura

As a health and beauty company, Pura focuses on stretching the life back into your skin (pun intended). Offering a suite of aesthetic treatments like botox and PDO threads as well as a full range of skincare products allows them to tackle the concept of aging from both sides of the field.

Approach

My role was to work with the owners to curate and develop each brand touchpoint and create the full experience. The identity was designed to be warm yet sophisticated.

Services

– Art Direction
– Branding & Packaging
– Web Design
– Web Development

website

www.thepuralife.com

original logo

updated logo

time is ticking

Working with a brand that is all about reshaping the effects of age and nature on the human body allows for some nuanced creative freedom. I expressed that in the form of an infinite looping Lottie animation for the sites page transitions.

next project

I have the best words.
Say hi and I'll share some.

Write me a
message Linkedin

// Wait for Webflow to initialize document.addEventListener('DOMContentLoaded', function() { // Register ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); // Utility function to check if we're in the Webflow editor const isWebflowEditor = () => { return window.Webflow && window.Webflow.env('editor'); }; // Only run animations if we're not in the editor if (!isWebflowEditor()) { // Fade in elements with class 'fade-in' as they scroll into view gsap.utils.toArray('.fade-in').forEach(element => { gsap.from(element, { scrollTrigger: { trigger: element, start: 'top 80%', toggleActions: 'play none none reverse' }, opacity: 0, y: 30, duration: 1, ease: 'power2.out' }); }); // Slide in elements from left with class 'slide-left' gsap.utils.toArray('.slide-left').forEach(element => { gsap.from(element, { scrollTrigger: { trigger: element, start: 'top 75%', toggleActions: 'play none none reverse' }, opacity: 0, x: -50, duration: 1, ease: 'power2.out' }); }); // Slide in elements from right with class 'slide-right' gsap.utils.toArray('.slide-right').forEach(element => { gsap.from(element, { scrollTrigger: { trigger: element, start: 'top 75%', toggleActions: 'play none none reverse' }, opacity: 0, x: 50, duration: 1, ease: 'power2.out' }); }); // Scale up elements with class 'scale-up' gsap.utils.toArray('.scale-up').forEach(element => { gsap.from(element, { scrollTrigger: { trigger: element, start: 'top 80%', toggleActions: 'play none none reverse' }, opacity: 0, scale: 0.5, duration: 1, ease: 'back.out(1.7)' }); }); // Stagger animation for lists with class 'stagger-list' gsap.utils.toArray('.stagger-list').forEach(list => { const items = list.children; gsap.from(items, { scrollTrigger: { trigger: list, start: 'top 80%', toggleActions: 'play none none reverse' }, opacity: 0, y: 20, duration: 0.8, stagger: 0.2, ease: 'power2.out' }); }); // Hero section animation (add class 'hero-section' to your hero container) const heroSection = document.querySelector('.hero-section'); if (heroSection) { const heroTimeline = gsap.timeline({ defaults: { ease: 'power2.out' }}); heroTimeline .from('.hero-title', { opacity: 0, y: 30, duration: 1 }) .from('.hero-subtitle', { opacity: 0, y: 20, duration: 1 }, '-=0.5') .from('.hero-cta', { opacity: 0, y: 20, duration: 1 }, '-=0.5'); } } });