Jump to content
Search Community

Responsive Tween

SWALKER test
Moderator Tag

Recommended Posts

I am very new to gSAP but I'm loving it BUT I can't manage to change the tween parameters responsively.


All I am trying to do it change a Y value at certain breakpoints
 

I tried this but it doesn't seem to work and actually when I insert it at the start of my JS file, nothing after works as if there is a syntax error but I can't see one and a validator came back clean?
 

$(window).on('resize',function(){

        if($('#content').width() >= 768){
              // tweens or code can go here
          
                          gsap.to(".about-right-lower", {
                      	  scrollTrigger: {
                          trigger: ".upper-image",   
                          start: "top 100%",
                          end:'+=20000',
                          scrub: 1, 

                          },

                          y: "-60%",
                          ease: "ease-in-out"

                    });
                    } else if($('#content').width() <= 767){
                          gsap.to(".about-right-lower", {
                      	  scrollTrigger: {
                          trigger: ".upper-image",   
                          start: "top 100%",
                          end:'+=20000',
                          scrub: 1, 

                          },

                          y: "-10%",
                          ease: "ease-in-out"

                    });
                    } 
});


I have complete layout shifts so I can't think of any adequate solution other than changing the parameters (for example using viewport based widths and heights).

Any help would be amazing!
 

 

Link to comment
Share on other sites

Welcome to the forums @SWALKER

 

For media query changes like that, you should use ScrollTrigger's matchMedia.

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

 

As for for your code not working, it's hard to say without seeing it. Are you sure you files are in the correct order, just before the closing the </body> tag, with your code file coming after the GSAP files. And you are registering ScrollTrigger, e.g. gsap.registerPlugin(ScrollTrigger)?

 

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.
×
×
  • Create New...