Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

text box animation must be always center in screen size

Go to solution Solved by PointC,

Recommended Posts

I ran into a new problem while working on my previous topic.
I want the two boxes moving from top to bottom and bottom to top to always move vertically towards the exact center even if the screen size changes. Some calculations are needed here, but I couldn't find which variable I can use to calculate it.
I mean, even if the screen height changes, the moving objects will be above and below the middle text.

See the Pen GRQJGvZ by tw_parodia (@tw_parodia) on CodePen

Link to comment
Share on other sites

  • Solution

I'm not sure I follow the question. Do you mean you want the "Hello" and "World" boxes to land perfectly centered on the "Random Text" box?


See the Pen a50267e21cfa1e8397e995a7c19ba96f by PointC (@PointC) on CodePen


Is that what you meant?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thank you again @PointC. I learned new thinks again, that "yPercent" looks super cool.
This line solved my issue;

yPercent: gsap.utils.wrap([-150, 150]),


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.