Fast scrolling does not show the text.

[GsapLover]

Hey, pls help me in a scenario like if I scroll fast then I miss the text and it jumps to the next section. It should always show the text and image swapping section should be in view when user scrolls again. 

 

I am sharing a demo here.

See the Pen YzLWdKM?editors=1010 by Sumitsharmaji438 (@Sumitsharmaji438) on CodePen

[Cassie]

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

 

https://greensock.com/3-migration/

[GsapLover]

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?

[Cassie]

Ah, yeah I think you're looking for 'events' not scroll.

It will certainly be harder to figure out and set up - you'll need to write custom logic to handle everything. But Observer is where to start figuring it out. (I personally wouldn't go for this approach if you're new to coding/GSAP)

https://greensock.com/docs/v3/Plugins/Observer

[GsapLover]

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

[Cassie]

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

 

Quote

 

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!

[GsapLover]

Thanks Cassie!