How to force different speed on separate tweens

[junik91 1 Likes (Newbie)]

Hello, 
I wanted to re-create effect from video below
https://we.tl/t-98eCGzkArn
So as you can see in the codepen with example i created two tweens for text Enter (opacity 0 -> 100) and Leave (opacity 100 -> 0) and it works like charm but if you see on the video I can see that backgorund is moving in slightly different speed that text - parallax how can I force same behaviour on image element that has position absolute inside of container that has 100vh height ?
Question 2: Is it a correct approach to create two tween one for enter another for leaving in the text element ? 

Question 3: lets say I have 10+ sections so for each image element and text-element there will be separate timeline and scrolltrigger watcher. Does this have an impact on performance ? Is this a right approach ?

 

Cheers, happy wednesday

 

See the Pen XWYBOmY by dzunik91 (@dzunik91) on CodePen

[Rodrigo 5,088 Likes (Superhero)]

Hi,

 

I see that you took this example as a base for this:

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

 

Any particular reason for using images instead of backgrounds? I 'd stick with backgrounds if I was you, but if you want to use images you should tinker a bit with the styles and use percentage values for your animations.

 

Here is a small proof of concept:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[junik91 1 Likes (Newbie)]

@Rodrigo thank you again for awesome hints and examples.