pietM Posted November 26, 2020 Share Posted November 26, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 26, 2020 Share Posted November 26, 2020 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! Link to comment Share on other sites More sharing options...
pietM Posted November 26, 2020 Author Share Posted November 26, 2020 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 Link to comment Share on other sites More sharing options...
pietM Posted November 27, 2020 Author Share Posted November 27, 2020 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 Link to comment Share on other sites More sharing options...
akapowl Posted November 27, 2020 Share Posted November 27, 2020 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 4 Link to comment Share on other sites More sharing options...
pietM Posted November 27, 2020 Author Share Posted November 27, 2020 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 2 Link to comment Share on other sites More sharing options...
pietM Posted November 27, 2020 Author Share Posted November 27, 2020 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! Link to comment Share on other sites More sharing options...
akapowl Posted November 27, 2020 Share Posted November 27, 2020 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 3 Link to comment Share on other sites More sharing options...
pietM Posted November 27, 2020 Author Share Posted November 27, 2020 Beauty. Thanks for the prompt help today, Paul! Hopefully these demos will help others as well. Have a nice weekend! 1 Link to comment Share on other sites More sharing options...
pietM Posted November 19, 2021 Author Share Posted November 19, 2021 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 Link to comment Share on other sites More sharing options...
akapowl Posted November 19, 2021 Share Posted November 19, 2021 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 2 Link to comment Share on other sites More sharing options...
pietM Posted November 19, 2021 Author Share Posted November 19, 2021 Yep. This is great, @akapowl. Thank you! I can take it from here. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now