Jump to content


How to move text elements from bottom to top > ScrollTrigger

Moderator Tag

Recommended Posts

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



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

Link to comment
Share on other sites

  • Laurence changed the title to How to move text elements from bottom to top > ScrollTrigger

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! 


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