Jump to content


Fade in and slide up

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 all,


Firstly, I hope you don't mind me using a JSFiddle, I tried to use the starter pen but it said my account was linked to spam (I was not logged in).


The JSFiddle example I have is here https://jsfiddle.net/z69w9u4g/45/


I am using Scroll Magic, but my problem is more related to TweenMax.  I have a lot of sections and each of them have some text on them.  In my example, I done a dummy section so you can see the scroll effect.  What I am after is for each block of text to fade in, whilst at the same time slightly slide up. 


As you can see in my example, I am kind of achieving this.  However, the text is sliding up into the other section.  Really, I am after a bit of advice on a couple of things.  Firstly, if I remove the slide up portion of the code, you will see the natural position of the text (just at the top of the section).  Really, I want all blocks of text to sit about 50-100 px below their natural position, and slide up to their natural position.  Is there any way to set the starting point for this block of text?


My next question relates to best practices.  As I mentioned, I have a lot of blocks of text in different sections.  Do I need to repeat this code for each block of text, or is there are way to make it reusable?


Any advice appreciated.



See the Pen by z69w9u4g (@z69w9u4g) on CodePen

Link to comment
Share on other sites

Hi @nick2price :)


Welcome to the GreenSock forum.


If you want each element to animate 50-100px from their final position, I'd recommend a .from() tween rather than a .to() tween. Something like this:


var fadein_tween = TweenLite.from( '#insideText', 1, {autoAlpha:0, y: 100} );


If you do it like that, you can also remove your opacity:0 and visibility:hidden in your CSS.


If you have a bunch of text blocks that will do the same thing, you can loop through and create a tween for each one and add them to the controller. Here's a pen that I used as an answer to another forum question, but it's pretty close to what you're trying to do.


See the Pen evqNEP by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

You're welcome. That's how we roll in the GreenSock neighborhood. ;)


Here's another quick example which should help.

See the Pen BwEvLO by PointC (@PointC) on CodePen

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.