csphilli

Thank you so much! Man, that was as easy as I was hoping it would be!

Hi, I have an aside element that animates in from X: 150 on desktop. On desktop layouts it works well because the aside is to the right of main content. But on mobile layouts, all the sections are vertically stacked. So the X:150 animation causes these X animations to glitch and doesn't look well on mobile. Is there a way to have gsap use Y instead of X in instances where the window.innerWidth value is less than a specified amount? I'm calling functions for each gsap animation because i'm using an observer on each section. I suppose I could call a specific function based on the width but that seems overkill and a lot of repeating the code for something as simple for using either x or y. Thoughts? For example if this was desktop: const animateFieldCards = () => { gsap.from(".field-locs-section section", { opacity: 0, duration: 1, x: 150, ease: Power4.easeOut, stagger: 0.25, }); }; This would be mobile: const animateFieldCards = () => { gsap.from(".field-locs-section section", { opacity: 0, duration: 1, y: 150, ease: Power4.easeOut, stagger: 0.25, }); };