Stefano Monteiro Posted April 24, 2021 Share Posted April 24, 2021 I have this sequence of timelines chained to a master using .add(). I need to clear the properties of the first timeline called background , more specifically the xPercent which is bugging on browser resize. I tried adding it to the tweenFromTo at the end as tweenFromTo(background.duration(), 0, { clearProps: true), but it did not work. const background = gsap .timeline({ paused: true }) .to(".lytbox-menu__nav", { xPercent: 100, }) .to(pseudo, { cssRule: { scaleX: 0.4, transformOrigin: "right", }, }); master .add(background.tweenTo(background.duration())) .add(tl2) .addPause(); menuOpened = master.duration(); master .add(tl3) .add( background.tweenFromTo(background.duration(), 0) ); Link to comment Share on other sites More sharing options...
GreenSock Posted April 24, 2021 Share Posted April 24, 2021 A few questions: What do you mean by "clear the properties of the first timeline"? Do you mean clear all the inline styles of particular elements? Or are you trying to clear any recorded start values to force the tweens to re-record them on the next render (invalidate())? Why do you think xPercent is "bugging on browser resize?" By its very nature, xPercent is responsive so I'm a bit confused here. Can you please provide a minimal demo so we can see the issue in context? That'd significantly increase your chances of getting a solid answer. Link to comment Share on other sites More sharing options...
Stefano Monteiro Posted April 24, 2021 Author Share Posted April 24, 2021 Sorry I wasn't clear. 1 - Clean the inline style; 2 - The xPercent is responsive, however after the animation is done the inline style of translate is set in pixels. So, in a mobile device when flipped the element position goes off. 3 - See codepen with example. Note the .wrapper, it is animated with xPercent: 100 from its original position oftranslateX(-100%). It comes in on button click a whole chain of timeline happens and at the the inline style is translate with the negative viewport width (100%) in pixels. See the Pen ZELwyeK?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 25, 2021 Solution Share Posted April 25, 2021 Ah, you're making one of the most common mistakes - not setting transform-related values directly with GSAP. You've got your CSS on the wrapper setting the transform to translateX(-100%) but when GSAP parses the current transforms, the browser reports them in a matrix() or matrix3d() which is always pixel-based! So it's impossible for GSAP to discern that you intended the value to be percent-based. As you probably know, GSAP has both "x" and "xPercent" (same for y/yPercent) which can be COMBINED. So when it parses the current transforms from the browser, it puts those in the "x" in this case...and then later you're applying an xPercent value which gets combined. Solution: explicitly set() the transforms via GSAP initially so that it can cache them properly with the relative units you're using. So in your case: gsap.set(".wrapper", {x: 0, xPercent: -100}); See the Pen jOydaRm?editors=0010 by GreenSock (@GreenSock) on CodePen Is that the effect you're looking for? 1 Link to comment Share on other sites More sharing options...
Stefano Monteiro Posted April 27, 2021 Author Share Posted April 27, 2021 Awesome. That works perfectly. Worth mentioning that the translateX(-100%) should be set in the CSS as well to avoid FOUC. Thanks 1 Link to comment Share on other sites More sharing options...
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