How to I change the position of the text in my scroll timeline?

[terroarr]

I like the way my codepen is working, but I just want the text to be positioned in the bottom left of the window instead of the middle like it is now. I want to keep the way it currently functions though, with the text changing on scroll, and changing at the same positions.

 

I tried changing (start: "center 50%") to (start: "center 100%"), but it broke the scroll and the text wouldn't fit inside the scrolling window anymore... Any idea how I can achieve what I'm after? Is it even possible?

See the Pen NWwppWp by matt7861 (@matt7861) on CodePen

[OSUblake]

Hi terroarr,

 

One problem is that you are animating your triggers. You should wrap your text in another div and use that as that trigger.

 

And if you want to move where is starts down, you should also move the end down, kind of like this.

start: "center bottom",
end: "bottom center",

 

[GreenSock]

That's just a CSS issue. You can offset your elements by 40vh, for example and alter your start/end like:

See the Pen YzEZrqV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are many ways you could set this up. Like you could put all the animations in a single timeline that scrubs with one ScrollTrigger, for example. But if the current setup works for you, great. 

 

Good luck with the project!