Animate X or Y based on window.innerWidth

[csphilli]

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

 

[OSUblake]

Welcome to the forums @csphilli

 

If you're using ScrollTrigger, you can use matchMedia to create your animations according to a media query.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

Or maybe manually writing your own media query listener.

 

See the Pen WKpmxN by osublake (@osublake) on CodePen

 

If you're constantly calling those functions, then I'd just make the property dynamic, although I'd probably use fromTo instead of from. See the Creating from() logic issues here.

 

let axis = window.innerWidth < 500 ? "y" : "x";
  
gsap.fromTo(".box", {
  [axis]: 150
}, {
  [axis]: 0
});

 

[csphilli]

8 minutes ago, OSUblake said:

Welcome to the forums @csphilli

 

If you're using ScrollTrigger, you can use matchMedia to create your animations according to a media query.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

Or maybe manually writing your own media query listener.

 

 

 

 

If you're constantly calling those functions, then I'd just make the property dynamic, although I'd probably use fromTo instead of from. See the Creating from() logic issues here.

 

let axis = window.innerWidth < 500 ? "y" : "x";
  
gsap.fromTo(".box", {
  [axis]: 150
}, {
  [axis]: 0
});

 

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