how to change .to var like x in mobile view

[yahya haddad 0 Likes (Newbie)]

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

    })

 

[PointC 14,205 Likes (Superhero)]

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.

 

[yahya haddad 0 Likes (Newbie)]

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

 

 

[PointC 14,205 Likes (Superhero)]

I think switching to a .fromTo() tween should fix that for you. Please give this a try:

 

tl.fromTo(".step_img", {y:440, scale:1.5}, { y: 0, scale: 1 });

Happy tweening.