clearProps on .add()

[Stefano Monteiro]

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)
    );

 

[GreenSock]

A few questions:

1. 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())? 
2. Why do you think xPercent is "bugging on browser resize?" By its very nature, xPercent is responsive so I'm a bit confused here. 
3. 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. 

[Stefano Monteiro]

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

[GreenSock]

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? 

[Stefano Monteiro]

Awesome. 

 

That works perfectly. Worth mentioning that the translateX(-100%)  should be set in the CSS as well to avoid FOUC.

 

Thanks