Text reveal animation using scrollTrigger

[Anees87]

Hi I'm trying to achieve something like in this website.

Screen record is here

Below screenshot is attached to indicate the section in the demo website.

 

How I can achieve something like on the website on scroll ? Please help by providing a codepen on how I can achieve this same effect.

See the Pen wvXMJWO by mohomedanees (@mohomedanees) on CodePen

[mvaneijgen]

Hi @Anees87 welcome to the forum! Great job on the demo! This really helps you nudge you in the right direction.

 

Personally I always like to start with a timeline in GSAP, with this you're more flexible which way you want to go, especially when starting out and you're not yet sure what your end code would look like. What was great in your demo is that your elements where already at the correct position when the animation would be done. This is great because then you only have to worry about animating the elements .from() the location you want them to start.

 

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.

 

See the Pen XWYdyxL by mvaneijgen (@mvaneijgen) on CodePen

 

Splitting the animation and ScrollTrigger this way really helps you focus on one part at a time. This way you can tweak the animation separate from ScrollTrigger and you can then focus on getting the scroll right, eg now you could tweak the end: value to increase the time it takes to complete the animation.

 

See the Pen MWXyzxx by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! 

[Anees87]

@mvaneijgen awesome. Thank you very much for the support. What I can do if the text need to start from top ?

[mvaneijgen]

You have to ask your self, what is the top? Right now the animation starts when the center of the browser hits the top of your #animText-section, I would suggest playing around with the start: and end: values and post back here if your are truly stuck with a demo of what you've tried , to show what isn't working.

 

Also take a look at https://greensock.com/docs/v3/Plugins/ScrollTrigger, everything you would want to know is in there. 

[Anees87]

Sorry I'm so new to gsap so let me try and go with the documentation and figure out somethings. I'll ask you if I get stuck. Thanks

[mvaneijgen]

No need to apologize. I could of course show you how it's done, but personally I've found that diving in the documentation (the videos on there are also great!) and trying things out your self really helps kickstart the learning process, but yes, if you're stuck be sure to post back. 

[Anees87]

Hi @mvaneijgen I have made some changes. But when I scroll up the title "Hello world" also moves down. How can I fix this issue ?

I have made a screen record as well and the codepen link here.

[mvaneijgen]

So you want it to be part of everything that sticks around? (is pinned), then make it part of the container you are pinning. 

 

See the Pen NWzrgWb?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Anees87]

Thank you very much @mvaneijgen. It works great. Awesome work. I see you have added the hello text inside the same section let's say if I added the hello text in the next section then only this issue occurs.

<section class="test"></section>
<section class="animText-section">
  <div class="overflow-hidden">
    <h2>No sliders.</h2>
  </div>
  <div class="overflow-hidden">
    <h2>No tabs.</h2>
  </div>
  <div class="overflow-hidden">
    <h2>No code.</h2>
  </div>
</section>

<section class="space">
  <h2>Hello title</h2>
</section>

Why I need to achieve this is if there is another component comes below this then the "space" section also shouldn't move down. You can see the issue in the screen record. There you can see when scroll up the component below the text also moves down. Need a solution for it please.

[mvaneijgen]

Yes, if you move it out the section it is not part of the section and thus it can not behave like it is in the section, that feels like a catch 22.

 

You can at another section to your sections and use that as the pin section, but if you want it to behave like the rest and pin when scrolled, you have to some how add it to the section. 

 

See the Pen dyKXZgY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Your example works as your original example you've linked as a screen recording eg the blocks before and after will behave like elements normally do when scrolled. 

 

 

I have the feeling I don't understand you question, could you maybe explain it like the following format 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

[Anees87]

If I'm not mistaken you're saying that I have to add all the section inside one section and pin the main section class. Thanks again for helping me this far.

[mvaneijgen]

If you want things to pin, yes you have to add all the things you want to pin inside the thing you're pinning.