Jump to content
Search Community

How to force different speed on separate tweens

junik91 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...