Fullscreen text animation with content below

[tp1998]

I'm tring to achive text animation on each scrolls. please check the pen link, I have few lines and I want each of them to appear on each scrolls, and after  that page content comes.

 

I'm a newbie, I hope I gave proper instruction. Please help me achive this if possible, any similar example would also be sufficient.

 

Thanks in advance.

See the Pen poLmVrV by tarunpatnayak (@tarunpatnayak) on CodePen

[Cassie]

Hey there - I really highly recommend taking the time to watch the video. You'll certainly be able to achieve this afterwards.

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

 

If you're still stuck after looking at the docs and watching the video, pop back and we'll see what we can do to help clear things up for you.

[tp1998]

Hi Cassie, thanks for this, I have gone through the docs, but and I understood most of the stuffs. But it's still confusing for me to figure out.

 

Here's a similar pen I'm reffering to - https://codepen.io/BrianCross/details/PoWapLP

But the thing is it's infinite, and I want to it to end and let user scroll through the other page contents.

I tried setting the sections as absolute from fixed, and pin the parent container, but I think I did not do it properly, can you please check here - 

See the Pen bGvPVNy?editors=0010 by tarunpatnayak (@tarunpatnayak) on CodePen

[mvaneijgen]

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 LYdKGew?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Check it out the text is animating one by one, if you enable ScrollTrigger it will animate that but on the user scrolling, you can then tweak your timings with the ScrollTrigger settings

[tp1998]

Hi @mvaneijgen thanks for your  response,

 

Here, I created a similar approach by keeping 

See the Pen XWZreGK by akapowl (@akapowl) on CodePen

 from this thread as my base 

 

 

but the thing it i is not working with smooth-scrollbar.js

Can please have a look?

 

See the Pen ZExdbNa by tarunpatnayak (@tarunpatnayak) on CodePen

 

Edited August 27, 2022 by tp1998

[mvaneijgen]

The examples you show are much more complex and your version has multiple ScrollTriggers and multiple timelines which for sure makes it hard to debug or even figure out what is going on.

 

Mine just has one ScrollTrigger and one timeline, simple, concise and works. Why do you want to make it so complicated? 

 

See the Pen ExEBKVx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Also what is the reason you're using Smooth Scrollbar.js and SplitType.js, these are both libraries not from GSAP, so have no guarantee to play nice with GSAP. You are free to use them off course, but it is a bit weird to ask for help on a forum that has nothing to do with these plugins. Also GSAP has perfectly capable plugins that seem to tackle the same use case, but DO play nicely with the all the other GSAP plugins, so to me it seems like a no brainer to use these instead, but of course don't feel forced to use them. 

 

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

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

[tp1998]

Hi, @mvaneijgen what you made is a single tween tweening with scrub property, and what I wanted is each sentence appear on each scroll, Looked at different examples on codepen and came up with this 

See the Pen ZExdbNa by tarunpatnayak (@tarunpatnayak) on CodePen

 . But issue still arises as if I randomly scroll up and down it is overlapping. Although I checked this

See the Pen ZEyXPGj?editors=0010 by GreenSock (@GreenSock) on CodePen

and learned about preventOverlaps and fastScrollEnd but it still doesn't seem to make any progress. Can I please have any suggestions for this?

[Cassie]

Hey tp

Maybe you're looking for something like this?

 

See the Pen xxWoPOL?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Also a little note - Minimal demos are *so* important when you're asking for help. Your example is pretty complex, there's an external scrollbar lib, autoplaying video, and a bunch of commented out code.

If you're struggling with triggering elements at the right place, just strip everything back to the bare bones, some elements, some fades, minimal styling and no other external libraries. Then once you're happy - start layering back on.

If this isn't quite right let's use this demo as a starting point for the next question to make things a little easier for the people trying to help.

Thanks!