How to move text elements from bottom to top > ScrollTrigger

[Laurence]

Hi, I'm trying to achieve the animation for this like in this site . (Can scroll down to this section )

 

 

Basically I want to move the text from bottom to top and vice versa. How do I achieve this kind of functionality for each of my .txt-box inside the .panel parent element?

See the Pen QWVZVrV by laurence-albano (@laurence-albano) on CodePen

[mvaneijgen]

The best thing to do 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. 

 

I didn't have time to fully write out the timeline, but you want to animate some things right? Then I would always start with a timeline and just start out laying out the animations. You could start with my base with the fancy position parameter's, but if you really want to learn I would start out by just handwriting each animation to see what really needs to happen. Your first .panel has a class of .first, but give the next one .seconds, .third, ect and write your animation that way. Doing it this way will make it really clear where you can put a loop and need to do some fancy staggers. I sometimes make the mistake of starting out with the fancy staggers before I have working code and then it always is an up hill battle, it is always better to get something working first before optimising. 

 

Again just remove ScrollTrigger it is just in the way at this point and focus on the animation you want to happen.

 

 

See the Pen poOxqGY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

When you're ready check out this video by our own @Carl really great tutorial on how to setup these fancy position parameter's. Hope it helps and happy tweening!