Jump to content
GreenSock

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

Responsive Tween

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

Hi there - gosh that was a fast response!

Thanks so much for that - I will read through it

I have pasted all my JS here if this helps

See the Pen ZEJbXvG by shereewalker (@shereewalker) on CodePen

Link to comment
Share on other sites

Nothing really stands out. Try putting your html, css, jQuery, etc in that pen and see if it works. If it works on CodePen, then there's probably an issue with your setup/environment.

 

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.
×