Jump to content
Search Community

how to change .to var like x in mobile view

yahya haddad test
Moderator Tag

Recommended Posts

i have this scrolltriggger animation

 
 
          var tl =  gsap.timeline({
          scrollTrigger:{
            trigger:".steps  ",
            start:"top  center",
            end:"+=4000px",
            scrub:5,      
            pin:true,      
         
 
          }
          });
 
          tl.from(".step_img",{duration:3, y:440 ,scale:1.5})    
          tl.to(".step_img",{duration:3,x:260
    })

i want to change the x to 0 in mobile viewport

 

or disable this line in mobile viewport

      tl.to(".step_img",{duration:3,x:260
    })

 

Link to comment
Share on other sites

Hi @yahya haddad :)

 

Welcome to the forum. 

 

This is a case where a function based value would work well since it will get refreshed with the ScrollTrigger. Here's a quick example. See how the x value depends on the window width?

 

See the Pen BaJLpax by PointC (@PointC) on CodePen

 

If you need completely different tweens and timelines depending on window size, check out .matchMedia().

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

 

Happy tweening and welcome aboard.

:)

 

  • Like 5
Link to comment
Share on other sites

PointC   Thanks for the replay, its work but there is an issue that showed up,

when adding  invalidateOnRefresh :true ,the style crashed

 

this is the real example that I'm working on

See the Pen qBpaJvO by mediamax (@mediamax) on CodePen

 

 

and this how it looks like after adding  invalidateOnRefresh :true

See the Pen WNdGaWy by mediamax (@mediamax) on CodePen

 

 

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