Jump to content
Search Community

Fast scrolling does not show the text.

GsapLover test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi there!

Something like this maybe?

See the Pen OJZXGdp?editors=1010 by GreenSock (@GreenSock) on CodePen

A tip - scrub and toggleActions serve completely different use cases and can't be used together. either scrub or toggleActions


I also noticed that you're using deprecated syntax. Check out the migration guide here



  • Like 1
Link to comment
Share on other sites

Hi Cassie,


Thanks for replying and suggesting migrations, But still the image 1 or image 2... are overlapping the text if I scroll very fast.

I want that when image 1 will be the in view then text should be hidden and If I fast scroll at very first time then it should not be scrolled more than paragraph text. I hope that makes sense.   


can you please help me regarding the same?

Link to comment
Share on other sites

yeah I was looking for the same thanks for understanding and yes, I m new to GSAP.?


But now, facing two main issues using observer-

- facing a jerk while moving or touching.

- And not able to scroll or move to the next section after the text is visible.


See the Pen YzLWdKM by Sumitsharmaji438 (@Sumitsharmaji438) on CodePen


please help..

  • Like 1
Link to comment
Share on other sites

  • Solution

Hey again,

I'm not entirely grasping your end goal as the HTML and JS seem a little at odds with each other. The 'app_logo' element isn't in the DOM, your .para animation and .scale_panel animation aren't fading anything in, they're actually hiding the elements, but there's no need to hide them as they're not visible anyway.


You're also trying to mix Observer and ScrollTrigger and ScrollSmoother, which will need some very careful consideration to get right.

If I were you I'd step right back and write out some logic steps. Something like this...




step 1 - draw in the green line on page load

step 2 - observer triggered fade in text and increase circle mask

step 3 - observer triggered  fade out text and decrease circle mask

step 4 - disable observer and continue with page scrolling

step 5 - trigger scroll triggered animation


Then, once you have them laid out - try to think about the logic holes in between your steps, e.g.


- What if someone tries to scroll down before the green line is drawn in step 1? Do I want to play step 2 or do I want to disable anything from happening until step 1 is finished?

- What if someone scrolls back up after observer is disabled? Do I want to initiate observer again


There are a lot of custom logic steps here and unfortunately we can't think it all through for you as there's lots of decisions you'll have to make for yourself about the behaviour! I'm happy to help if you have GSAP specific questions.

This demo will likely be helpful to you for an idea of how to approach mixing up scrolling and observer

See the Pen ExopjNW?editors=0011 by GreenSock (@GreenSock) on CodePen

(As you're new to GSAP it's worth mentioning this is a pretty complex task, if you're just trying to learn, this might be a confusing place to start!)

I hope this helps!

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