Stacking Slider

[pietM]

Happy Thanksgiving, everyone! 

 

I'm attempting to stack the enclosed sliders (adapted from @PointC's brilliant demo). I've modified the GSAP to account for the classes and placed the absolute elements into relative sections. What am I missing here? Disabling the wheel action still doesn't allow me to scroll to the lower section. 

 

Wishing the community a restful holiday, 
M

See the Pen XWjWNwe by euqio (@euqio) on CodePen

[GreenSock]

I don't have much time - there's 100+ lines of JS to weed through and I'm not sure exactly what you're asking. Can you provide just a minimal demo that's focused solely on the issue you're running into? Are you saying you have horizontally-moving stuff filling the screen but you want users to be able to scroll to content below that but that's not happening right now? Is this a GSAP-specific question? 

 

Happy Thanksgiving!

[pietM]

Thanks, Jack! 

 

There were some major, basic mistakes in my CSS. But, as a follow up I do have a specific GSAP-related question. I am trying to change the dot behavior for each discrete slider instance. I think it's line: 

 

let newDot = document.createElement("div");
newDot.className = "dot";

But when I switch out "document" for "master" or "this," it still doesn't work. 

Am I on the right track? 

 

See the Pen rNMNmMe by euqio (@euqio) on CodePen

[pietM]

Hi again. 

 

I've reconfigured the demo to better illustrate the issue. 

There are two slider instances (SLIDER 1 and SLIDER 2). Everything works great.

 

However, the nav dot for the "activeSlide" only works for the SLIDER 1 instance. The dot controls work fine for each, but the nav dot animation (from white to green) only works in the first instance.  

 

Have a look and let me know if the issue I'm describing is clear. 

Would appreciate any help here. Thank you!

 

See the Pen jOMOeNJ by euqio (@euqio) on CodePen

[akapowl]

Jey @pietM

 

one more thing I noticed is, that if you click on a dot in the second slider for example, the indicator in the bottom left corner chanbges on both your sliders, which also is not what you want, i suppose.

 

In your gsap.set and the tweens of your dotAnim-timeline you are targetting elements like this:  '.dot' or '.title'

meaning that gsap will target all the element with those classes throughout the whole document.

 

In the following demo I added these references

 

let allTheDots = dots.querySelectorAll(".dot"); 
let title = master.querySelectorAll(".title");

 

in between your creation of the dots, and your timeline/initial .set and then in the .set and your timeline, I target those specific to each master.

 

Here you go:

 

See the Pen 09db336c318403519bf48ccd459d3b94 by akapowl (@akapowl) on CodePen

 

Hope this helps.

 

Cheers,

Paul

 

[pietM]

Brilliant. Thanks for this, Paul! 

This is exactly what I needed. 

 

- 

 

I try not to lean too hard on the community for help. 
But help like this is what makes this such a great platform. 

Thanks again!
M 

 

[pietM]

Hi again. 
One last question for this thread. 

Is there a way to adopt the width from a parent div rather than the window innerWidth to establish the slide's width?

I thought I could do this by utilizing GSAP's "getProperty" function, but that doesn't seem to work. 

 

let masterwidth = gsap.getProperty(master.querySelector(".panelWrap"), "width");  

 

Instead of 

 

let iw = window.innerWidth;

Otherwise, the slides bisect when aligned. 

 

See the Pen wvzvLxW by euqio (@euqio) on CodePen

 

Any thoughts are appreciated! 

[akapowl]

Hmm, I don't get it. As soon as I fork your pen, the sections don't show side by side anymore, like in your example, but stacked - without me making any changes to them.

 

Anyway; could you try setting 

 

iw = master.offsetWidth;

 

See the Pen 702fbc93559a0395305fd9f99ec0b569 by akapowl (@akapowl) on CodePen

 

 

Edit: Got it; was related to the scrollbar. I set overflow to hidden in that example on the body now.

 

Edit 2: Alternatively, especially if you need scrolling, set width: 100vw to your body.

 

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

 

 

[pietM]

Beauty. Thanks for the prompt help today, Paul!

Hopefully these demos will help others as well. 

Have a nice weekend! 

[pietM]

Following up on this thread almost a year later!

Can someone point me to where I can changed the enclosed pen to wrap / loop after reaching the final cell? 

 

See the Pen 09db336c318403519bf48ccd459d3b94 by akapowl (@akapowl) on CodePen

 

All help appreciated, as always. 
M

[akapowl]

1 hour ago, pietM said:

Following up on this thread almost a year later!

 

Hello again @pietM

 

1 hour ago, pietM said:

Can someone point me to where I can changed the enclosed pen to wrap / loop after reaching the final cell? 

 

Although it might require some re-working of your setup, I think for that you'll best want to take a look at the horizontalLoop() helper function (in the docs under 'helper functions').

 

https://greensock.com/docs/v3/HelperFunctions#loop

 

You'll also find a demo with draggable included there. I hope that'll help.

 

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

[pietM]

Yep. This is great, @akapowl. Thank you! 

I can take it from here.