Jump to content
Search Community

Positioning with TextPlugin

Juno911 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have robbered some code from gsap examples and changed it to my purposes. However, something I do not understand with the positioning here. Each staggerFrom has the same yaxis description. Why do the following containers fall below the previous one? I mean this is want we want, but once I come to the part where I want to reset the yaxis back to 0, I must say, that I dont understand how the thing is going. If I clear all props, something bad happens. I dont want to reposition bu calculating the yaxis. I just want to say staggerFrom y:0 and expect to be positioned in zero.

 

Not sure if the question is totally clear. So why to each textarray element falls below each other? And how can I say the third element (2pos) that it should start from the top of its div? 

 

Any help is much appreciated.

See the Pen MGPbmx by generaal-locke (@generaal-locke) on CodePen

Link to comment
Share on other sites

It looks exactly as I would expect. The position of your appended divs has nothing to do with SplitText. To see what I mean, try commenting out your tltour timeline  (lines 23-25) and just look at the layout. Do you want all the text to be at the top of the div? If that's the case, you'd just change your CSS

 

.TeaserText {
  font-size: 4rem;
  color: #000;
  position: absolute;
}

 

Does that help?

 

Happy tweening.

 

 

  • Like 4
Link to comment
Share on other sites

Ha, somehow I didnt come to the idea that the divs are appended to each other. I thought they will all be operated into the #messages div.

However, you made the flow totally clear and from that I was able to develop another solution without absolute positioning, what I try to avoid whenever doable. Once the thing was clear after reading your words, it made click and it was clear that this is coming from the document flow, not from gsap tools. Thanks for shedding light here. Appreciate it a lot! I hope that I soon can share my gsap web project I am working on right now. 

  • Like 1
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...