Jump to content

yahya haddad

how to change .to var like x in mobile view

Moderator Tag

Recommended Posts

i have this scrolltriggger animation

          var tl =  gsap.timeline({
            trigger:".steps  ",
            start:"top  center",
          tl.from(".step_img",{duration:3, y:440 ,scale:1.5})    

i want to change the x to 0 in mobile viewport


or disable this line in mobile viewport



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



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

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.



  • Like 1
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.