Center text after scrolling

[Victor Minchev]

Hello! I want to center the text exactly in the center after scrolling. I want the text to start on the right and go right to the center, how can I achieve this. I've done something similar right now, but the text doesn't go exactly in the center, and maybe it's the wrong way. Here is the code.

See the Pen WNmodQN by doifkidw-the-bashful (@doifkidw-the-bashful) on CodePen

[mvaneijgen]

Hi @Victor Minchev welcome to the forum!

 

What I would do is position all the elements where you want them to end up, so in this case in the middle of the screen and then use an animation to animate them .from() some other position. 

 

I had to modify your code a bit to get the necessary bits, so that we can start animating. HTML and CSS are really important when working with GSAP, for instance I wanted to know the width of all the elements you wanted to move, so I wrapped them in a div with an ID so we could easily target it (I've given the element a red border to easily see the width). It looked like you're using Bootstrap, so I loaded that in the CSS settings pannel and I've also loaded the GSAP and ScrollTrigger files in the JS panel. Next time you can start with our Codepen starter template, this loads all the latest plugin files

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! But the basic gist is that we use some math to calculate where the element should start and then .from() animate it to its original position (the center).

 

As you can see ScrollTrigger is disabled for now, this because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Hope it helps and happy tweening! 

 

See the Pen dyrOmPp?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Another solution could be using our Flip plugin, this can easily animate between any two states and thus you don't have to do any calculations at all you could just give your element two classes, one for the center and one for the right and let Flip handle the rest!

 

https://gsap.com/docs/v3/Plugins/Flip/