Object centering with absolute position + GSAP

JavaScript
1

Hey guys! So I have a project with gsap to animate the elements and I made one of the text animations using them in absolute position. But when I try to center them horizontally and vertically on the screen with top 50%, left 50% and translate 50% 50%, it doesn’t work, I believe it’s because gsap is already applying a translate with the animation. How would you apply the animation and at the same time center them?

This is my project: https://codepen.io/danielasegadilha/pen/zYMWvQv?editors=0110

2

Are you talking about the text for the first animation?

I don’t see a transform: translate() in the CSS but if I add one it centers the text of the first animation. Also, it is -50%, -50%, not 50%, 50%

.rotating-text p .word {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  overflow: hidden;
}

For the second text, you can center it using grid or flexbox on the container. Just adding display: grid to the .hero-section selector pretty much centers it.

1 Like
3

thanks!! I tried translate( 50%, 50%) without the minus, that was the problem

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.