How to reset same properties on the same elements but in different timelines?

[glem1337]

Why does same properties on the same elements but in different timelines was applied immediately? So animation on scroll does not working.

I had used immediateRender, clearProps, autoRemoveChildren but it doesn't help.

You can see my problem in codepen.

P. S. Sorry for my English : )

See the Pen oNYzRvR by glem1337 (@glem1337) on CodePen

[ZachSaucier]

Hey glem1337. .from() properties are applied immediately. Since your tween with the ScrollTrigger is a relative tween, it will use the current value (which was just set to 0) as the starting value. So your ScrollTrigger animation goes from 0 to 0. That's probably not what you want  

 

There are a lot of workarounds (like using a .fromTo() in your ScrollTrigger animation instead) but the best one likely depends on the setup in your project. 

[glem1337]

If I using .fromTo() box was visible on start but must be a hidden.

See the Pen oNYzRvR?editors=0110 by glem1337 (@glem1337) on CodePen

[glem1337]

And if i use 

appearTween.to('.box', { alpha: 1 });

and

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0; // invisible by default
}

and

scrollTween.to('.box', { alpha: 0 });

I had the same effect

[ZachSaucier]

The issue is logical: you can't have an element be both invisible and visible at the same time. 

 

Perhaps if you created a demo that more closely resembles your actual project we would be able to provide a more helpful solution.