Layered pinning from bottom (variation) with pinned video scrub

[Joram3000]

Hello GreenSocks!

I've been studying and researching the forum and docs now for more than 7 weeks now. 
And there is some elements I just can't figure out 😓. I'm a junior of 2 years experience. 

I've created a demo with the elements I need to make work together:
https://stackblitz.com/edit/stackblitz-starters-blmmhb?file=GsapDemo.tsx

What I want to achieve:

1: Stacking effect: A variation on Layered pinning from bottom.

With segments of variableheights, preferably dynamic (as there are going to be assets to be loaded).

 

2: Pinned VideoScrolling. (I've first tried it with image-spriting but the dataload would be 2 times 200 webp's, I could'nt get it to shrink more than 200mb). We need to go with video on this project in order for the dataload to be managable. 

 

3: A Parallax header on top is going to be added later - hopefully the dynamic height calculations will help out on this
And Parallax text effects on some taglines that will come in on every segment=
 

Issues:

Dynamic height calculation. As you can tell I've hardcoded the heights in order to get a decent understanding of what is happening.

This should be functions and calculated on dynamic height changes (as assets would need to be loaded in). Where should I start on this?
 

Pinning of video elements breaks my layered-pinning-from-bottom. After the VideoScrollers you can tell the panels aren't doing the stacking anymore. The grey markers aren't correct and the stacking effect is lost.
I've added the StandaloneScrollTrigger component twice to figure out if it really works independently.

 

How to nest certain elements in their own components/files. Allthough that allready seems to go well.

 

I've read the docs. I'm reading the docs and checking the demo's for more than 7 weeks now.

Also the course from Creative Coding Club. And I just can't really figure it out.

The learningcurve seems to be too steep for my 2 years of experience - I might have blank spots in my understanding of the topic.

The examples/demo's I've studied and used:

Scrub Animations: 

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

Layered Pinning from bottom:  
(although I went for a variation I've found in the forum somewhere as I can't work with position: absolute on every panel)


My own video's have the right codecs and suppose to work good. 
Image-spriting was'nt going to work as the dataload would be over 150mb (more than 200 webp-images)

Thank you for your time to read this  

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

[Joram3000]

here is a videoprintscreen of the issue - the issue is at the bottom of the screen
I've put grey markers for the StackingPanels and Purple for the video-related stuff
It goes wrong after the 2nd video. the first video is just doing the same thing as the lines. 

You will see that after the 2nd video - using the StandaloneScrollTrigger instances, I lose the stacked-pinning
 

 

[Cassie]

Hi there! There are a lot of questions here and your demo is very involved.

The best way to approach stuff like this is to strip things right back, remove react and tailwind and anything that could be causing confusion. Get the basics right, then build it up gradually again.

 

Lets start here.

Quote

Dynamic height calculation. As you can tell I've hardcoded the heights in order to get a decent understanding of what is happening.
This should be functions and calculated on dynamic height changes (as assets would need to be loaded in). Where should I start on this?

Can you explain what you mean by this? What should be functions? I don't see any hard coded height, other than in the CSS. Your GSAP code is already nice and flexible. You can see that if we add some content into the orange panel rather than a fixed height, the pinning works as expected.

If you're adding content in via JS, then it will behave exactly the same, with the small caveat that you'll need to let ScrollTrigger *know* that you've just changed the height. You can do this by calling ScrollTrigger.refresh()
 

I've made a codepen demo as a starting point for you. If you're happy with this part of the question we can look at the video's. It would be very helpful if you could add the videos into this demo for me to show the issue.

 

See the Pen QWPxBxX?editors=1000 by GreenSock (@GreenSock) on CodePen

This feels like it's likely an issue with the order the ScrollTriggers are being created or called. Which is probably down to React, but let's get this working in codepen first, then when we know that it works and have surfaced any GSAP specific issues or confusion, we can sort it into components and pop it back into react-land. 

 

[Joram3000]

Thank you for your quick response! And the refresh() tip And thank you for the codepen starter, I went for the stackblitz as advised , as Ive used useStates and useRefs for the video-component

About the hardcoding: The tweens of the animations are hardcoded, I've just calculated what the scrolldistance would've been from top by adding the heights of the panels that've been traveled.

The first issue is that the videoscrollers need to be pinned, after that it breaks the 'panel-stacking' after it, 
in my demo this is after a scrollposition of 15400, when the first nested scrolltrigger is doing it's wonderfull job

I will try to put the videoscroller in a codepen but it might take a while as useRefs, useStates and stuff arent working similar. 
thank you for your reply!

 

[Joram3000]

the issue is basically that the (pinned) video-scrolling is breaking the panel-stacking

I've managed to add a video player that has similar behaviour as in my project 
And it has the same issue (hooray)

See the Pen NWmzLNP?editors=1111 by joram-kroon (@joram-kroon) on CodePen

as you can see , after the video, the pane-stacking is not working anymore 

[Cassie]

After replying I realised it would likely be easier to just strip the video player out and just focus on the pinning. 

 

(this is what I mean by strip it back to the basics)
 

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

The issue is likely that the scrolltriggers are being created in a different order than they appear on the page. We can use ScrollTrigger.sort to fix this.

[Cassie]

I added ScrollTrigger.sort() into your pen and it fixes the issue too
(also if your pens are private we can't fork them, so if you can make them public that's a big help!)

All in all, I think everything here can be solved with ScrollTrigger.sort() and ScrollTrigger.refresh()

Hope this helped. Did you have any other questions?

[Joram3000]

ScrollTriggerSort() is definetely helping
But im wondering how that would work in a nested situation? 

and the the box animation is working as well
until you want to make a panel with it as well. Then the behaviour becomes unreliable and the box is jumping all over the place. 

See the Pen OJGEBpW by joram-kroon (@joram-kroon) on CodePen

same thing is in the stackblitz
https://stackblitz.com/edit/stackblitz-starters-blmmhb?file=GsapDemo.tsx
 

*i'll figure out how to put all the pens on public too 😃 (they suppose to be public allready :S)

[Cassie]

So you've just tried to put a pinned panel inside a pinned panel? You're already pinning the ".video" element, and now you're trying to put that element inside a "panel" element that gets pinned. That's going to conflict.

Are you trying to do something like this?

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

I've added the video panel into the same loop so it gets handled in there. You could pull it out but you'll have to figure out a way to set the correct z-index based on the position in the DOM.

 

(the pens are public now, it might have just been a codepen issue?)

[Cassie]

Quote

But im wondering how that would work in a nested situation? 

React creates the DOM tree children first, then parents, so you'd call ScrollTrigger.sort() in the parent component.

You can also add numbers to your scrollTriggers with refreshPriority which forces a sort. ✨ 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

[Joram3000]

wow that's a cool effect. It's soo close to what i need

The only thing is: 
the 'box-panel' would have texts above and below the box/animation, so the whole panel is gonna behave like this:
 

the whole panel should have the same behaviour, but the box-trigger should not be the panel-trigger, but it's self 
quite similar to this OG-scrub example orange panel.

the main issue now is if i have the videopanel/boxpanel have the right start, but at the 'end-trigger'  it jumps to some other place

thank you for your help, it's really helping a lot, i start to make more sense of it.when let the box trigger it self it gets to jump :S 

thank you for your time, i should have created a post a month ago :*D 


 

[Cassie]

You haven't linked a demo here so it's hard for me to help I'm afraid.

What have you tried?

[Joram3000]

oops sorry, here is it - not that much changed:

See the Pen ExJpGzE by joram-kroon (@joram-kroon) on CodePen

i have the same issue with the stackblitz:
https://stackblitz.com/edit/stackblitz-starters-blmmhb?file=GsapDemo.tsx

the video animation starts to become jumpy and impredictable, 
as far as i understand now because im 'pinning in pinning' - which suppose to be a classic mistake to make if im correct

panel with the box would have other elements, and i want it to behave as the youtube link of my current project above.

thank you so much for answering , this is very helpful  
 

[Joram3000]

it might have to do something with pinSpacing throwing it off..

another question is: in my own project i need to resize 2 times manually for al the panel markers to line up correctly due to the heavy use of video elements loading in, that suppose to be triggerable with a ScrollTrigger.refresh, that doesnt seem to help here ( i put the scrolltrigger.refresh() inside the useGSAP hook

[Cassie]

Lets hold off on stackblitz and refresh and React questions until this is actually working.

So in order for each of the panel 'reveal' to work, each panel needs this setup in the scrollTrigger.

trigger: panel,
end: `top+=${window.innerHeight}`,
pin: true,
pinSpacing: false,

If you change one of the panels to use the box as a trigger - like this, you're changing the functionality of the panels.

trigger: ".box", //<= this is a change as i want to trigger it on itself, or at least not to the top of the panel
scrub: true,
start: `top+=${window.innerHeight} center`,
pin: true,
pinSpacing: false,

You also got rid of the if/else statement so  as you say, you're adding nested pins to the panel with the box element now. 

Maybe this helps? You can't do nested pinning, but you can animate elements within a pinned container and use nested elements as the trigger, as long as you state that they're within a pinned container...

See the Pen MWRBdJr?editors=1010 by GreenSock (@GreenSock) on CodePen

[Joram3000]

thank you for your reply! 
yes, except it should stay centered in the middle, (for the duration of the video animation), and then tag along again.
when i add pin: true, pinspacing: false the box is not staying in center but starts to jump around

like this is my goal and what im building , that is working untill the panel-stacking comes into play:
and thats it. now the 
the box will be replaced by this tree animation that needs to be centered till video is done, 

 

[Cassie]

This video is showing completely different functionality though. There's no layered panels here.

In the video, the panel that the tree is in doesn't reveal the panel beneath it or get revealed by the panel above. It's just a normal scrolling page, then the tree gets pinned for a while. It feels like you're trying to mash together two very different things here. I'm not really sure how you're aiming to combine them?

Maybe something like this is closer?

See the Pen VwNBOQZ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Joram3000]

yes i think this is it, this is exactly what im trying to do

yes in the video example there is no panel-stacking, just straight forward scrolltrigger-animation
but when combined with my try on the panel-stacking it throws the video-scrollers totally off. 
now i think i have a clue on what to do , thank you so much for your time and help!

[Cassie]

Glad we got somewhere. I think it's all down to creating things in the right order and not accidentally nesting pinned elements ✨

Definitely a fiddly one.