SCROLL

the menil

I was approached by The Menil Collection, a contemporary art museum in Houston, to help create the identity, website and event collateral for their 25th anniversary. The theme was inspired by the pioneering work of 20th century French Artist Yves Klein. Taking a hands on approach to the project and subjecting my colleagues to plumes of ultramarine pigment around the office, I created a custom design in the likes of Yves Klein’s work that was used as the centerpiece for the collateral.

next project

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

Write me a
message Linkedin

(713) 530-1051

Approach

With a rich history and a brand that literally makes your mouth water, we partnered with Crutchfield Studio to give Smokey D's a fresh new look. We wanted to position them where they belong - at the center of the family barbecue. With full hearts and stomachs, we shot video, products, friends and family to breath new life into this long-time Austin icon.This is some text inside of a div block.

Services

– Art Direction
– Branding
– Web Design
– Web Development

website

www.thepuralife.com

// 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'); } } });