SCROLL

ut health

Considered the most comprehensive academic health center in the Gulf Coast, UT Health is a vast ecosystem comprised of 8 medical schools. The Department of Surgery has 7 speciality divisions spread across 4 teaching hospitals in the largest medical center in the world.

Approach

Working with the internal design department and a set of surgeons and professors, I developed a new look for the department of surgery that reflected their modern approach to healthcare. After creating a new logo lockup and color scheme, the brief was to redesign their website and collaborate with UT's development team on coding the site into a user friendly CMS.

Services

– Art Direction
– Branding
– Web Design
– Motion

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