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

I wanted to re-create effect from video below
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



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...