CodeTest

Hi @Rodrigo This is my codpen where everything works as expected, no issues at all. I just want to hide the purple section when you get to the horizontal section. https://codepen.io/Code-Test24/pen/vYPzNNM Your following demo seems perfect: https://codepen.io/GreenSock/pen/ExMRXRB But I'm struggling to implement it with my work. Please can I get some support with this?

Hi @Rodrigo it’s all above, not sure if you've read my issue below my codepen? My issue is I want to hide the intro when I reach the horizontal scroll which works perfectly if you look at the first codepen in this topic. As mentioned already I’m fully aware there’s still 2 ScrollTriggers, and I’ve mentioned what I’m struggling with to get the hide intro working with my horizontal scroll slider (which works but is broken after I added the hide intro section) which again I’m aware is because of the 2 ScrollTriggers. Summary: My horizontal scroll works (first codepen) I can get the intro to hide, but then breaks the slider because of the 2 ScrollTriggers Is the solution merging it and putting them into 1 ScrollTrigger? I have tweaked my code but I'm aware the issue of what you're saying is the same. I think I'm struggling with the fact that I want 2 things to happen at one trigger point, both different end points. You've explained already about the 2 scrolltrigger issue, but how do I resolve that if I want 2 things to happen at the same time with different end targets? You've understood my issue... its literally still the same issue I'm having, struggling to get it working.

https://codepen.io/Code-Test24/pen/LYaBXya Is the solution merging it and putting them into 1 ScrollTrigger? I have tweaked my code but I'm aware the issue of what you're saying is the same. I think I'm struggling with the fact that I want 2 things to happen at one trigger point, both different end points. Sorry to be a pain

@Rodrigo any thoughts on the above please?

Makes sense, but the end target for both are different though? how would that work?

Hi, please could you help me to get this working with my slider. https://codepen.io/Code-Test24/pen/gOEjpaZ if you comment out lines 7-18 in JS and comment out absolute position for main in css (line 13), the slider works... can you see whats causing the issue?

No problem! Thank you @GreenSock and @Rodrigo for resolving this issue!

Hi @Rodrigo thank you so much for this example, its perfect. It might have been the way I was explaining, but this is literally the outcome I'm after. We're not looking to stop the user going to a space that seems to be there, that would be annoying. So I apologise for the way I explained above. Thats exactly what I wanted. Just out of curiosity is this at all possible? : You've really helped me out, thank you

ok thank you for the direction, I'll give it a go! I was also wondering, is there a way to stop the drag throwing you back up the page to the intro section when you go back to the start of the slider? (a question relating to the first original codepen!) It was a just a thought and I wondering if it was possible?

Hi again. Please can you help me with my codepen. I can get it to work if the sections are fixed position at 100vh and sections move up and only the slider section is visible; scrollbar is also at the top. Here is this example: https://codepen.io/Code-Test24/pen/GRedLBY However the intro section is taller than the viewport height, so I can't have fixed position. I'm struggling to get it to work. https://codepen.io/Code-Test24/pen/gOEzEpw Can I get some support with this please?

Thanks for that I'll give it a go!

thank you so much for sorting the drag issue thats perfect thank you. Yes.... (I know, I completely understand how it sounds, but the intro isn't needed once you reach the horizontal section. Best way to explain it is, its the navigation for the rest of the website) It was a requirement that the user should just be able to see and use the horizontal scroll section (at 100vh) once they pass the intro section. When I was looking at solutions, I was looking at observers, but I wasn't sure if this is the best way to go about it? Help! hoping to get some support with this please

Hi Please can I get some help! Once we scroll past the purple intro section we want to lock into the horizontal scroll section... so no scrolling back up to the intro section. I'm struggling to find a solution for this. Also the ScrollSmoother is causing an issue where when you've dragged the horizontal slider to the end slide, it suddenly scrolls down to empty space. I'm hoping the solution of locking just on the slider will sort this issue?

Thanks for your time @Rodrigo really appreciate it thank you

@Rodrigo Thank you so much. I know thats why I was struggling to get it to work, I needed some expert help! The buttons seem so close, any idea whats causing it to skip 2 slides?

For anyone else that did the same as me and copied the links from the resources page (which was an old version) Using the the latest version of GSAP will help and sort the issue out 🙈 @mvaneijgen I'm really sorry I'm back with my original question of snapping. https://codepen.io/Code-Test24/full/BabJLqQ especially clicking the next and previous buttons (I've hard coded a number in, as I'm struggling to figure it dynamically) Please can you help me with it?

Hi @mvaneijgen I'm back with another question, regarding the same codepen so I didn't start another topic. (Thank you so much again for the above and I'm glad the codepens were easy to work with!) When I've tried to add the above to my actual project, I'm having issues with Draggable (I'm getting an error). However it's working well in codepen. Seems pointless posting the codepen when I can't replicate it on there. https://codepen.io/Code-Test24/pen/BabJLqQ I've tried using the Draggable.js file from the umd downloads folder and I've also tried linking it to the same draggable file in the codepen above but I'm getting this error: gsap.min.js?ver=6.4.2:10 Uncaught TypeError: Cannot read properties of undefined (reading 'svg') at Object.Hd [as save] (gsap.min.js?ver=6.4.2:10:53146) at gsap.min.js?ver=6.4.2:10:53854 at Array.forEach (<anonymous>) at Kd (gsap.min.js?ver=6.4.2:10:53825) at new Draggable (Draggable.min.js?ver=6.4.2:10:16311) at Draggable.min.js?ver=6.4.2:10:15571 at Array.map (<anonymous>) at Function.create (Draggable.min.js?ver=6.4.2:10:15548) at HTMLDocument.<anonymous> (script.js?ver=1706469390:1:124657) the error line its got an issue with in script.js is: Draggable.create(".drag-proxy", { any ideas how to fix this please? p.s. I'm still trying to figure out the snapto values 🙈

Hi @mvaneijgen wow 343 animations!... but... with your guidance above its working in the way that I want : https://codepen.io/Code-Test24/pen/QWoawPO I think I've got it working in the way that you were guiding... hopefully. Does this make me a GSAP ninja? 😃 However, you've lost me at labels! 🙈 but I do want a cooler animation now you've said it 😂 Thank you so much for your invaluable time on this and helping me! So very grateful!

This is exactly what I would like to achieve but its the show and hide I can't get my head around! In this codepen I have positioned the headings stacked. Would the show/hide work on onEnter as well in the same way as your example? would it be a case adding a class? I have the idea in my head but I'm struggling to execute it! https://codepen.io/Code-Test24/pen/zYbPXey I'll investigate and look into the Snap Property in the way I want! thank you so much for the help once again.

Hi @mvaneijgen thank you so much for the explanation. I will have a look into the snapTo values. Is there a guide or an example where I can find the values at all? While I'm here I wanted to get some advice and help on another way to achieve what already works in my Codepen above please. The images in the horizontal slider don't go the full width so I was thinking of having just the image in the slider to easily achieve showing the previous and next slides on the edge of the screen, and display its heading (which is in its own list and not in the slide) when the image slide is in view. The position of the heading is always going to be the same. Is it possible to loop through the headings at the same time as the image slides? here is my 2nd codepen where I have attempted to achieve this. The heading position we would like is in grey to illustrate where we would like it. I guess in this version I won't have to do negative margins as I would in codepen 1. https://codepen.io/Code-Test24/pen/LYaOJeo I hope that makes sense! Any advice or help on this, I would be so grateful. Looking forward to hearing from you. Thank you

Hi GSAP team! I'm hoping to get help with this horizontal slider. I'm struggling with the container position when it snaps; we would like to the container to snap in the middle (showing a bit of the left and right slides as well). Can you please help me to achieve this please? I'm also having trouble showing the full slider after adding "Draggable." The slider seems to stop half through the last slide. Is maxwidth not getting the full width of the slider?