ScrollTrigger sidebar pinned overlaid sections

[TrulyNewbie 14 Likes (Newbie)]

On 10/20/2020 at 10:59 AM, akapowl said:

 

@zloycoder

 

It sure is.

 

Just remove everything related to smooth-scrollbar (the upper portion in JS and the .scroller div in HTML and its respective CSS) and you'll see, that it works the same way without smooth-scrollbar.

 

If you wanted to replace it with a different smooth-scrolling solution you'd have to set up the scrollerProxy of ScrollTrigger accordingly and make sure the HTML markup and CSS fit the needs of whatever solution you want to use.

 

Hi @zloycoder

Thank you for your hard work putting this together.

I have a question, how do I change the scroll to locomotive scroll and still make it work? I've switched it out, but I just can't get it to work. 

Please could you have a look at it for me? Any pointers will be such a help. 

 

Thank you 

See the Pen XWKQQmM by NewbieRuby (@NewbieRuby) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

@TrulyNewbie Looks to me like you have an extra container and height: 100vh

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

[TrulyNewbie 14 Likes (Newbie)]

31 minutes ago, ZachSaucier said:

@TrulyNewbie Looks to me like you have an extra container and height: 100vh

 

 

Thank you!!!!!

[pjtf93 2 Likes (Newbie)]

Hi, i want to do the same effect that @akapowl did in this codepen 

See the Pen 71b0d3b98ebd526c8abf2bb4b70ac702 by akapowl (@akapowl) on CodePen

 but in my case i would have 5 lines of text, and i want that each text line on the left have a fade in - fade out effect while the image is pinned. How do you think i should approach this case? I have made several attempts with no luck.

 

Thanks

[akapowl 5,222 Likes (Superhero)]

 

Hey @pjtf93

 

How to exactly do that depends on how exactly you want the text to behave.

 

In the example you provided, the text scrolls freely, but judging from your description, I would guess you'd rather want it to be animated (and thus it probably needs a different setup). This thread here also has an example of mine where the text is being animated in instead

 

 

 

See the Pen 256175b2dab5ddca7073dbc0e64e606d by akapowl (@akapowl) on CodePen

 

I have a slight feeling, this might suite your idea a bit better - but maybe I am wrong.

For the part of the different lines of text animating in seperately, the SplitText-Plugin might be a good way to go.

 

But again, it's hard to tell, without truly understanding how exactly you would want things to work.

 

 

9 hours ago, pjtf93 said:

I have made several attempts with no luck.

 

Why don't you just share one of your several attempts with us, and we could see what you could improve on from there?

 

Cheers,

Paul

 

[pjtf93 2 Likes (Newbie)]

Thanks for your reply @akapowl Your example is really close to what i want to do, but i still don't know how to make it work. Want i'm trying to do is having a container with 4 h1 tags that shows at the same time that the container with the colored background but each h1 tag should appear individually as you scroll down like both containers were pinned. Should i try to make a third scrollTrigger instance? Thanks 

 

Here it is what i have so far https://codesandbox.io/s/gsap-scrolltrigger-test-zn36w?file=/pages/index.js

Edited January 19, 2021 by pjtf93
Adding example

[mikel 4,775 Likes (Superhero)]

@pjtf93,

 

Look at the structure and logic in this case.

And try to adapt it to your needs.

 

See the Pen NWRoQJo by mikeK (@mikeK) on CodePen

 

happy tweening ...

Mikel

 

 

[akapowl 5,222 Likes (Superhero)]

Hey @pjtf93

 

Working quick on codesandbox in that environment you use really was a pain for me, so I decided to show you an example in a forked codepen instead.

 

The key to that demo is understanding how durations and thus also the position-parameter work on ScrollTriggers with scrub applied:

 

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

 

 

What I did here, was 

 

1) Add those <p> paragraphs  (instead of your h1s) to the HTML-Markup inside of each .panel-text

2) center things up via CSS inside each .panel-text by using flex (you don't have to create a third ScrollTrigger for it staying in place)

and 

3) change the timeline accordingly, meaning

• for the first tween: instead of tweening on each .panel-text, I am first getting each p inside of each panel-text and tween on those with a stagger instead

 

 texts.forEach((text, i) => {   
   
   var lines = text.querySelectorAll('p');

   ...
   
   tl
   .fromTo(lines, { y: () => { return "100vh" }, opacity: () => { return 0 } }, { duration: 0.33, y: () => { return "0vh" }, opacity: () => { return 1 }, stagger: { amount: 0.33 } })
   .to(text, { duration: 0.33, opacity: () => { return 0 } }, 0.66)
   ;
   
 });

 

The stagger has a specific amount set, so 'duration'-wise it's easier to make that staggering tween fit in neatly before that second tween starts.

 

See the Pen 1501e2c4f8c648ce206b94f9827cfd58 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps.

 

Cheers,

Paul

 

 

Edit:

Since with the staggering it might be somewhat more complicated to get to the right duration, what you could want to consider is addressing each of those paragraphs individually and simply chain them up in your timeline, like so:

 

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

 

 

[pjtf93 2 Likes (Newbie)]

Thank so much for your help @akapowl @mikel. Your examples were very helpful and i have made some modifications to my previous example, it's almost finish but i have a new problem. The image in the last container does not stick while the text scrolls up. What do you think i should do to make that last image stick?

 

Here is my modified example: https://codesandbox.io/s/gsap-scrolltrigger-test-forked-fybvy?file=/pages/index.js

 

Again, thanks so much for your help

[akapowl 5,222 Likes (Superhero)]

 

5 hours ago, pjtf93 said:

The image in the last container does not stick while the text scrolls up. What do you think i should do to make that last image stick?

 

That's why in my example, the end for the pinning ScrollTrigger is

 

end: () => "+=" + ((images.length + 1) * window.innerHeight),

 

The adding of 1 to the images.length is related to the animating of the images not starting at the same point as the pinning but one window-height later.

 

Thus you would have to consider that for your pinning which you currently do not do in your example.

 

You could also consider it to be 

 

end: () => "+=" + (images.length * window.innerHeight + window.innerHeight)

 

instead.

 

[pjtf93 2 Likes (Newbie)]

Thank you so much @akapowl, this worked perfectly for my case

[Xinner 0 Likes (Newbie)]

@akapowl

 

Do you have an example of how to do the bubbly effect transition between the images as you scroll?

[akapowl 5,222 Likes (Superhero)]

 

Sorry, I don't.

 

I think they might be making use of WebGL for that - maybe via three.js.

 

Something like this demo on codrops shows

 

https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

 

[Jase 7 Likes (Newbie)]

Hey @akapowl, just wondering where the codepen examples above have gone? Is it possible to either reinstate them or add?

[akapowl 5,222 Likes (Superhero)]

9 minutes ago, Jase said:

Hey @akapowl, just wondering where the codepen examples above have gone?

 

Apparently there were some changes with regard to codepen and how those are being handled, because they contain the old links from when they were public but I set them to private in hindsight which now causes them to not show up anymore.

 

From what I can tell you should be able to see the relevant pens on this page of the thread though.

 

See the Pen 256175b2dab5ddca7073dbc0e64e606d by akapowl (@akapowl) on CodePen

 

See the Pen 71b0d3b98ebd526c8abf2bb4b70ac702 by akapowl (@akapowl) on CodePen

 

 

 

Those on the first page are not showing anything else if I recall correctly.

I will change the settings on them eventually though when I find the time going through all of them.

 

[Jase 7 Likes (Newbie)]

Truly appreciate that @akapowl. Forever the superstar! 😎

[Jase 7 Likes (Newbie)]

@akapowl Is it possible to reinstate these codepens too? They are more in line with what I'm looking for

[Jase 7 Likes (Newbie)]

Okay that was weird, now I see that it jumped from here

 

[akapowl 5,222 Likes (Superhero)]

34 minutes ago, Jase said:

Is it possible to reinstate these codepens too? They are more in line with what I'm looking for

 

Sorry, I don't understand. Are you saying you are not seeing the codepens in my last reply?

[Jase 7 Likes (Newbie)]

@akapowl I'm just see 2 codepens. In the original post there are 7, and it's the 6th one I'm needing.

 

[akapowl 5,222 Likes (Superhero)]

 

That one is essentially the same as the second one I linked to above - actually it is worse because it uses a needless tween for the text-scrolling. But here you go, they should be visible again.

[Jase 7 Likes (Newbie)]

Thanks @akapowl, I appreciate the effort you've made he! Plus your explanation really helps me understand the rationale

[davidbwaters 4 Likes (Newbie)]

Oh man, I wish I had read the first part of this thread more closely before after searching these forums to solve my problem.  So I may be having other issues, but I'm open to simplifying my setup using any solution that works.

 

I have the liquid masking working on a demo, but the way I set up the pinning somehow breaks everything when trying to use matchMedia and recalculate things on desktop.  I also can't manage to destroy the timeline styles (I guess because I'm trying not to use a fixed number of slides and am looping, so I can't reference specific tls).  Anyways, I managed to get the fluid masking working pretty well in a codepen here 

See the Pen QWdrYjO?editors=0110 by davidbwaters (@davidbwaters) on CodePen

 but, as you can see, mobile is messed up.  It works fine without match media.  I tried adding locomotive scroll and I think the current issues are preventing that from working too, but I think the approach used here would work.

 

I'll also give the site I'm trying to implement it in. https://upbeat-hugle-f33533.netlify.app/ It has some canvas animations that are setting sizes in a script and I could only get scrolltrigger working by setting a timeout so that stuff is calculated  before the scrolltrigger init, but I can't get it to recalculate the sizes after it sets them correctly initially no matter what I do.  resize from big to small and back and it goes crazy.  i at least have it working on the size it starts at, disabled on mobile, like i'd like.

 

  I'm planning on refactoring and trying to get this and smoothscrolling working first, but any insight or pointers to what my issue may be would be amazing.  I think if I can get a responsive codepen working (ideally with locomotive working or working when added) I could add everything else in and account for it. 

 

thanks in advance for any help.  thought my work on the fluid masks might shed some light.

[Cassie 5,403 Likes (Superhero)]

Firstly, hah! It's my mask 👀

See the Pen RwRORqB by cassie-codes (@cassie-codes) on CodePen

[Cassie 5,403 Likes (Superhero)]

I think this thread might help with the 'disabling on mobile' issue