how to combine scrubbed and non-scrubbed

[MohsenKBZ]

hey there

 

is there any way to combine scrubbed and non-scrubbed animations so they play seamlessly?

the situation I have is pretty much like the codepen demo. 2 different animations coming from 2 different functions. animated properties can be different.

first one is for a parallax effect and the second one is for the inview animations

 

See the Pen KKrmZLj by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen

[Rodrigo]

Hi,

 

In this case I believe is just not possible. You have two different animations affecting the same properties on the same object so no.

 

If they don't share any property being animated, yes it could be done, but your current example is animating the same properties on the same object.

 

Here is a fork of your example with different ones:

See the Pen XWyRqmw by GreenSock (@GreenSock) on CodePen

 

Finally is not really a good idea to make the element you're animating the trigger element in a ScrollTrigger instance, it could lead to unexpected results.

 

Hopefully this helps.

Happy Tweening!

[MohsenKBZ]

@Rodrigo is there any other way to achieve it at all? 

[GreenSock]

Why not just wrap your element in a container (or two). So use the outer container as the trigger/pin, then animate the child's transforms for parallax, and then that child's child's normal transforms for the other effect. Nice and clean way to modularize things. 

 

Otherwise, like Rodrigo said, it logically can't make sense to animate the same properties to completely different values simultaneously. Like in your demo you've got y animating to -200 and also to 50. How could it do both simultaneously? 

 

Another option is to use proxy objects where you animate generic properties and then combine them in an onUpdate, applying them to the transform value(s). But I suspect the container strategy is simpler/cleaner. 

 

Good luck!

[MohsenKBZ]

thanks for help guys.

eventually I went with creating 2 containers for parallax and animations