Split screen scroll pinned text and scrolling images

[lvekua]

Hi Guys, is it possible to create similar scroll without scrollbar.js plugin?

See the Pen oNQBOgB?editors=0110 by lvekua (@lvekua) on CodePen

[SteveS]

The pinned text with images is somewhat simple to achieve and does not require Scrollbar.js

If you are talking about smooth scrolling, there is a paid GSAP plugin, ScrollSmoother, that can be used to get smooth scrolling.

[Rodrigo]

Hi,

 

I don't see why not. Is worth mentioning that scrollbar.js is not a GSAP related product so we can't offer support for it, we need to keep the limited time resources we have focused on GSAP related issues.

 

Luckily for us @akapowl, one of the superstars of the forums, has these examples:

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

 

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

 

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

 

Hopefully those helps.

Happy Tweening!

[akapowl]

2 hours ago, lvekua said:

Hi Guys, is it possible to create similar scroll without scrollbar.js plugin?

 

Yes, of course, smooth-scrollbar.js is just a 3rd party plugin for smooth-scrolling - you can do the same thing without any smooth-scrolling at all.

That example of mine that very likely was the base of your pen, as is, will only work in this scenario with smooth-scrollbar, though - because it technically is not 100% correct, but apparently it doesn't matter there.

If you're just looking for a version of that example without any smooth-scrolling, have a look at the thread it originated from; e.g. in this post:
 

 

 

 

It is also worth having a look at the thread that I link to in many of my answers of that thread above - it contains examples with GreenSock's ScrollSmoother integrated instead of smooth-scrollbar and also a simplified approach, e.g. in this post:
 

 

 

These should get you on the right track. Good luck with your project!

 

[lvekua]

Wow guys! @SteveS @Rodrigo @akapowl thank you so much for the effort to help.

Yes I just want to remove the third party scrollbar plugin without breaking the current scrolling functionality and I haven't been successful yet. Most examples I looked at are either using ScrollSmoother (which I cannot afford, yet) and/or scrolling both sides. I just need to pin the left side text (as in my codepen) until all images are scrolled vertically on the right. 

[Rodrigo]

Hi,

 

There are several examples in this thread already that have a series of different solutions for the scenario you have in your first post.

 

Here are a couple of extra examples as well:

See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen

 

See the Pen eYQYxJW by GreenSock (@GreenSock) on CodePen

 

As I mentioned in my previous post, we don't have the time resources to build custom solutions for our users, sorry. You can post in the Jobs & Freelance forums if you want to get some help there.

 

We're more than ready to help you if you get stuck with some GSAP related issue, just remember to include a minimal demo.

 

Good luck with your project.

Happy Tweening!

[lvekua]

@Rodrigo Again, thank you very much for examples. I was able to scramble something together  

See the Pen RwqZQbV by lvekua (@lvekua) on CodePen

 

If someone could take a look and let me know if its set up correctly I'd really appreciate it!

[Rodrigo]

Hi,

 

Looks nice, great work!

 

Maybe the only thing is to use yPercent instead of translateY, and definitely you don't need a function based value there.

 

Finally since everything goes in one section maybe just create a single timeline for the whole thing, no need to create all the extra timelines and ScrollTrigger instances for each element.

 

Something like this:

See the Pen vYQJrPj by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[lvekua]

15 hours ago, Rodrigo said:

Hi,

 

Looks nice, great work!

 

Maybe the only thing is to use yPercent instead of translateY, and definitely you don't need a function based value there.

 

Finally since everything goes in one section maybe just create a single timeline for the whole thing, no need to create all the extra timelines and ScrollTrigger instances for each element.

 

Something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

 

@Rodrigo Thank you so much! This is much cleaner and I feel like its performing much better.

Thanks again!

[lvekua]

Hey Guys, I just added fade in effect to the text and it works, but doesn't feel right.
I used the same trigger in two different instances, feels like they way I did it is not the right way and there is a better way.

Looked through the docs and couldn't find anything relative. Could you please take a look at this pen? I'd really appreciate it!

See the Pen RwqZQbV?editors=1010 by lvekua (@lvekua) on CodePen

[Cassie]

Could you elaborate on 'doesn't feel right.' Do you mean visually or your code approach?

What are you aiming for and what are you seeing right now that you dislike?

 

Are you maybe wanting to put it all onto one timeline instead of using two scrollTriggers?

[lvekua]

Sorry if I didn't make my point clear.

1 hour ago, Cassie said:

Are you maybe wanting to put it all onto one timeline instead of using two scrollTriggers?

Yes, that is exactly what I meant  feels like there is a cleaner way to write the same code.

[Cassie]

It's usually handy to get rid of loops and other 'clever' code when you're starting off with GSAP, just write nice standard timelines, it's ok if it looks repetitive, easy to read and easy to adjust is way more helpful!

 

Here's a timeline rewritten with separate classes instead of a loop, you can see how you can slot in new animations

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

If you're confused about how, take a look at the position parameter

 

[lvekua]

@Cassie Much appreciated! this makes lot of sense.