ScrollTrigger sidebar pinned overlaid sections

[TrulyNewbie 14 Likes (Newbie)]

Hi, I'm trying to create a pinned effect. I want the image and text to remain fixed and as you scroll, so the image and text fade out and the next div fades in. Ithink I'm close but it's just not smooth. I want the effect to feel like your scrolling on the spot...

I'd really appreciate all the help I can get. Thank you

(I'm also using a loop on wordpress, so all the divs have the same name.)

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

[GreenSock 18,572 Likes (Superhero)]

6 hours ago, TrulyNewbie said:

I think I'm close but it's just not smooth.

What exactly isn't "smooth"? 

 

6 hours ago, TrulyNewbie said:

I want the effect to feel like your scrolling on the spot

I'm not quite sure what that means. Like...you want them to overlap each other and be scrolling while fading? 

 

Again, I don't quite understand what you're looking for, but is this closer? 

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

[TrulyNewbie 14 Likes (Newbie)]

Thank you! God bless

[TrulyNewbie 14 Likes (Newbie)]

Sorry I'm back! 

I want to create something like this: https://cuberto.com/

The text to the left, and image fixed to the right. I don't want my image to mask in and out, but just fade in and out

I just can't get it right. 

 

Thanks again

[ZachSaucier 7,152 Likes (Superhero)]

Check out this demo from the list in the ScrollTrigger docs:

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

[GeorgeErshov 9 Likes (Newbie)]

I'm trying to recreate the sticking effect exactly like yours https://cuberto.com/ but taking into account the smooth scrolling of locomotive scroll + scrollTrigger. But my attempts are unsuccessful. The demo you threw off doesn't quite fit with locomotivejs in mind. Can I ask you to create a simple demo version that uses at least 2 cards? It is important that a smooth scrolling script with scroll Trigger js is installed there

[ZachSaucier 7,152 Likes (Superhero)]

1 minute ago, GeS said:

I'm trying to recreate the sticking effect exactly like yours https://cuberto.com/

Whose "yours" are you talking about? Cuberto made their website (or had someone make it for them). We (GreenSock) didn't create it.

 

2 minutes ago, GeS said:

The demo you threw off doesn't quite fit with locomotivejs in mind.

Which demo are you talking about? But all demos can work with smooth scrolling, it's just an additional piece added.

 

2 minutes ago, GeS said:

Can I ask you to create a simple demo version that uses at least 2 cards? It is important that a smooth scrolling script with scroll Trigger js is installed there

It'd be better if you made a minimal demo of your situation that clearly shows what issue you're running into. That way we can help you where you actually need it  

 

[GeorgeErshov 9 Likes (Newbie)]

Hi, I created a CodePen demo. My job is to make the black block change the pictures. 
<div class>= 'panel blue' 'panel red' 'panel orange' are my project pictures. Here is an example of what I am trying to achieve with gsap + locomotive scroll: https://cuberto.com/.
On the screenshot I wrote what I mean.
I'm not interested in the project shift effect, I want the usual effect, for example: 

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

I hope my question is clear and you can help me to implement this block with projects. What do I need to write, what code have I missed?

 

 

[GeorgeErshov 9 Likes (Newbie)]

See the Pen MWyBqzx by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

 

 

 

[akapowl 5,215 Likes (Superhero)]

 

*** Note from the future ***

The examples posted here by me are not 100% correct and there also are easier ways to achieve this effect.

Head over to this thread for better versions - bonus: they include ScrollSmoother instead of smooth-scrollbar.

 

 

 

Something like this maybe @GeS ?

 

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

[GeorgeErshov 9 Likes (Newbie)]

Yes !!! Thank you! The last thing me need to do is to have the text on the left for each project. How to achieve this? So that it is not merged. And be at a distance of 300px from each other. Could you add any text from lorem ipsum for example? Please!

[akapowl 5,215 Likes (Superhero)]

 

*** Note from the future ***

The examples posted here by me are not 100% correct and there also are easier ways to achieve this effect.

Head over to this thread for better versions - bonus: they include ScrollSmoother instead of smooth-scrollbar.

 

 

 

You could for example create a wrapper for your texts in a similar fashion to the one for your images, and apply ScrollTriggers for each of those texts in a similar fashion to what I did for your pictures there

 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

[GeorgeErshov 9 Likes (Newbie)]

i love you! thank you very much. you made my day!

[akapowl 5,215 Likes (Superhero)]

 

*** Note from the future ***

The examples posted here by me are not 100% correct and there also are easier ways to achieve this effect.

Head over to this thread for better versions - bonus: they include ScrollSmoother instead of smooth-scrollbar.

 

 

 

One more thing:

 

In your provided example (and thus, both my pens based on that), things totally fall apart, when resizing.

I found, that this was related to you haveing a .scroller inside which your smooth-scrollbar is supposed to scroll, but you apply the smooth-scrollbar to document.body

 

let bodyScrollBar = Scrollbar.init(document.body, ...

 

 

Changing it to

 

let bodyScrollBar = Scrollbar.init(document.querySelector('.scroller'),

 

 

seems to have fixed the resizing-issues.

 

Only, now, the markers go all crazy.

 

I don't know for sure, but probably this is just related to the way smooth-scrollbar works !?

 

 

I also adjusted the tweens for the ScrollTriggers a bit, to make them behave correctly, on resize.

Hope I did not overcomplicate - but everything should be working as expected now when resizing.

 

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

 

 

 

Also note, that I have made some changes in your CSS, while trying to find out, what makes things break on resize.

 

 

[GeorgeErshov 9 Likes (Newbie)]

everything really works much better when you change the screen size! Thank you .
Can I ask you to see the last detail of which I have been suffering for 3 hours? 
I use the web-flow, but it does not matter. Please look at the example I implemented with your help: https://george-studio.webflow.io/untitled

scroll down and you will see how the text smoothly appears and rises to the top. But when we want to go back to the top of the page and scroll back, the text is very wrong. Too fast and too sharp, not as smooth as https://cuberto.com/ they have it somehow smoothly up and down. I suppose it's in the start&end settings that something needs to be corrected?

[akapowl 5,215 Likes (Superhero)]

 

Could you try, if changing your code to .fromTo-tweens, similar to how I did in the last demo, resolves your issues?

 

   tl
   .fromTo(image, { height: () => { return "100%" } }, { height: () => { return "0%" } })
   ;

 

 

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

 

[GeorgeErshov 9 Likes (Newbie)]

is not much better, but still something is wrong. I changed duration from 0.33 to 1 to make the transition smoother. But still, the text itself is a bit chaotic. What could be the problem?
https://george-studio.webflow.io/untitled

[akapowl 5,215 Likes (Superhero)]

 

I see, you set it to this now:

 

 

   tl
   .fromTo(text, { y: () => { return "100%" }, opacity: () => { return 0 } }, { duration: 1, y: () => { return "50%" }, opacity: () => { return 1 } })
   .to(text, { duration: 1, y: () => { return "0%" }, opacity: () => { return 0 } }, 0.66)
   ;

 

 

That would not work properly, because the second tween would be starting at 0.66 into the timeline - when the first tween would still be tweening and since they both tween on the y-value, they'd be conflicting.

 

 

Try changing that startpoint of the second tween to this:

 

   tl
   .fromTo(text, { y: () => { return "100%" }, opacity: () => { return 0 } }, { duration: 1, y: () => { return "50%" }, opacity: () => { return 1 } })
   .to(text, { duration: 1, y: () => { return "0%" }, opacity: () => { return 0 } }, 1.0)
   ;

 

 

 

It is important to know, that durations on timelines/tweens with ScrollTriggers, that have scrub applied, do work different from durations on regular timelines/tweens. They are relative to the total duration of the scrubbing and not absolute values representing seconds to play.

 

 

You find a more detailed explanation about that in the docs:

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

 

 

 

[GeorgeErshov 9 Likes (Newbie)]

Thank you very much for your help!
It got a little better again

See the Pen VwaBJJo?editors=1010 by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

it's still not as smooth as the cubberto and it's very important... however, I can no longer distract you. You've helped me very much and with your help I almost got the result I wanted. I will study the documentation and maybe I can find a solution. 
Thank you again.
somewhere exactly in the center of the text stops for a second and then continues its movement again. It is striking to the eye. It is this almost invisible stop scroll. I scroll to 50% of the screen approximately, I think you noticed). 

[akapowl 5,215 Likes (Superhero)]

 

*** Note from the future ***

The examples posted here by me are not 100% correct and there also are easier ways to achieve this effect.

Head over to this thread for better versions - bonus: they include ScrollSmoother instead of smooth-scrollbar.

 

 

 

Cuberto.com actually does handle things a bit different from what I suggested.

 

Here you go, this should pretty much resemble cuberto.com's behaviour.

 

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

 

 

 

Instead of creating a ScrollTrigger for each .panel-text, I wrapped them inside another wrapper, and translate that wrapper up, instead.

 

Here's what changed to before regarding the markup:

 

<section class="black">
        
	<div class="text-wrap">    
		<div class="text-wrapper">
		  <div class="panel-text blue-text">Blue</div> 
		  <div class="panel-text red-text">Red</div>   
		  <div class="panel-text orange-text">Orange</div> 
		  <div class="panel-text purple-text">Purple</div> 
		</div>
	</div>

...

 

.text-wrapper {
  position: relative;
  width: 450px;
  height: 100vh;
}

.panel-text {
 
  ...
  
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

 

 

I think, this is where you wanted to go in the first place, and my suggestion might have been a bit misleading.

 

Does this feel more, like what you thought of?

 

 

 

[GeorgeErshov 9 Likes (Newbie)]

this is just great! you are the best, thank you!!😍

[akapowl 5,215 Likes (Superhero)]

 

*** Note from the future ***

The examples posted here by me are not 100% correct and there also are easier ways to achieve this effect.

Head over to this thread for better versions - bonus: they include ScrollSmoother instead of smooth-scrollbar.

 

 

 

Coming to think of it once again, in a scenario as such, there is not even the need for translating the text-wrapper upwards with a tween.

 

You'll notice, that the amount, that the text-wrapper is being translated up on the y-axis is the exact same as the scroll-'duration' of the pin

 

((images.length) * window.innerHeight)

 

so it actually does nothing much, that simple scrolling would not do - but with a tween.

 

 

So if you set the pin to

 

pin: '.p-wrap'

 

instead of

 

pin: true

 

 

and adjust some bits and pieces in your CSS  -  I marked the relevant parts with

 

 /*---*/

 

you could get the same result with one less tween to be processed, if you wanted.

 

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

 

 

[zloycoder 0 Likes (Newbie)]

Can you please tell me, is it possible to somehow move away from the scrollbar smooth or replace it with a similar solution?
The thing is, there is still scroll magic on my page, and if I include the scroll plugin, it breaks everything.

 

On 17.09.2020 at 08:38, akapowl said:

 

Если подумать еще раз, в сценарии как таковом нет даже необходимости переводить текст-оболочку вверх с помощью анимации.

 

Вы заметите, что количество, которое текст-оболочка переводится вверх по оси Y, точно такое же, как и продолжительность прокрутки булавки.

 

 

так что на самом деле он ничего особенного не делает, такая простая прокрутка не годится - но с анимацией.

 

 

Итак, если вы установите булавку на

 

 

вместо того

 

 

 

и отрегулируйте некоторые детали в вашем CSS - я пометил соответствующие части с помощью

 

 

при желании вы можете получить тот же результат, используя на одну анимацию меньше.

 

 

 

 

 

 

[akapowl 5,215 Likes (Superhero)]

 

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

 

[ZachSaucier 7,152 Likes (Superhero)]

What's the point in using ScrollMagic and ScrollTrigger on the same page? Just convert the ScrollMagic code to ScrollTrigger.