Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
liow

GSAP + CSS Transform

Recommended Posts

Hi  there, anyone know how to fix this responsive layout issue?


A simple demo is placed in the codepen below.

 

I have set the CSS media query to add transform property to the X position of the text. GSAP does not read the new value from the CSS media query after screen resize unless I reload the browser.

See the Pen vYedomq by callmeliow (@callmeliow) on CodePen

Link to comment
Share on other sites

Is there a must to use matchMedia() ? I only want to adjust the yPercent only.

 

If you inspect the element, you may see the problem is caused by the inline CSS. GSAP read the Xposition from CSS media query and when the window resize, the inline CSS is still there. And this is why the issue occurs.

.saveStyles() is not working or am I using it the wrong way? 😅

 

See the Pen vYedomq by callmeliow (@callmeliow) on CodePen



 

Link to comment
Share on other sites

9 minutes ago, liow said:

Is there a must to use matchMedia() ? I only want to adjust the yPercent only.

 

GSAP will not know that you changed it without it.

 

See the Pen rNGdNZj by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Ok, the way you write for the the matchMedia() is different from the docs. That's why I confuse about it as two animation in both media query is the same.
The create is not listed in https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
Is the create means ScrollTrigger.create() ? Creating two different ScrollTrigger for different media query?

Link to comment
Share on other sites

The name create has no meaning. It's just a function, and you can name it whatever you want. 

 

If your animation code is going to be the same for every media query, there is no point in writing the same thing out again. Use functions to your advantage and keep your code DRY (Don't Repeat Yourself).

 

ScrollTrigger.matchMedia({
  "(max-width: 576px)": function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".flex",
        toggleActions: "restart none none reverse",
        start: "top center",
        end: "bottom center",
        markers: true
      }
    });

    tl.from(".text", {
      yPercent: -100,
      duration: 1
    });
  },
  "(min-width: 577px)": function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".flex",
        toggleActions: "restart none none reverse",
        start: "top center",
        end: "bottom center",
        markers: true
      }
    });

    tl.from(".text", {
      yPercent: -100,
      duration: 1
    });
  }
});

 

18 minutes ago, liow said:

Creating two different ScrollTrigger for different media query?

 

This is explained in the docs. There won't be 2 ScrollTriggers as it will kill the other one when the media changes.

 

Quote

Allows you to set up ScrollTriggers that only apply to certain viewport sizes (using media queries). It's surprisingly simple, actually - you pass in a configuration object with a key for each media query like "(min-width: 800px)" and an associated function that should run when that media query matches. Do all your setup tasks inside that function. Any ScrollTriggers that are created inside that function are automatically reverted and killed when that media query no longer matches! If the ScrollTrigger has an animation associated with it, that will also be reverted and killed.

 

  • Like 1
Link to comment
Share on other sites

Ops... Sorry. I didn't notice that you wrap them into a function called "create". 😅

 

Thanks for helping me @GreenSock and @OSUblake.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×