yahya haddad Posted March 21, 2022 Posted March 21, 2022 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 Posted March 22, 2022 Posted March 22, 2022 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. 5
yahya haddad Posted March 22, 2022 Author Posted March 22, 2022 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 Posted March 22, 2022 Posted March 22, 2022 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. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now