Jump to content
Search Community

ScrollTrigger sidebar pinned overlaid sections

TrulyNewbie test
Moderator Tag

Go to solution Solved by TrulyNewbie,

Recommended Posts

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




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

Link to comment
Share on other sites

  • ZachSaucier changed the title to ScrollTrigger sidebar pinned overlaid sections

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.



Link to comment
Share on other sites


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?





  • Like 3
Link to comment
Share on other sites

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 by pjtf93
Adding example
Link to comment
Share on other sites

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:





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)


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');

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







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



  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites


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)




  • Like 3
Link to comment
Share on other sites

  • 2 months later...
  • 1 month later...
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.


  • Like 1
Link to comment
Share on other sites

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.

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