Support with snap on HoizontalScroll

[CodeTest]

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? 

 

 

See the Pen BabwbJB by Code-Test24 (@Code-Test24) on CodePen

Edited January 27 by CodeTest

[mvaneijgen]

Hi @CodeTest welcome to the forum!

 

Lets tackle one question at a time to avoid confusion.

1 hour ago, CodeTest said:

Is maxwidth not getting the full width of the slider? 

With these kinds of questions I always like to test this my self. Just calculate what you think maxWidth should be and feed that in as the number (hard coded) and check if it works, than compare that to what you get from your calculated value. 

 

In your current setup the snapping would never work, not only did you indeed get the wrong maxWdith value, but also your first element had a margin-left of 20vw, so each snap would be off by a bit and later elements that offset would compound to be totally off. So adding the same offset of 20vw to the last element at the right fixes this issue, and then your calculations are also correct.

 

Instead of feeding one value to the snapTo you can also feed an array, same with the maxWidth I personally like to first hard code things and then move to getting the values dynamically, knowing what values you should calculate allows you to test the values your getting and makes it easier to see what you're doing wrong. 

 

Instead of your .offsetWdith I've used the slider (given a background-color: orange;) and got the width with the following code: document.querySelector('.slider').getBoundingClientRect().width; Hope it helps and happy tweening! 

 

See the Pen YzgERGa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[CodeTest]

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. 

See the Pen LYaOJeo by Code-Test24 (@Code-Test24) on CodePen

 

I hope that makes sense! Any advice or help on this, I would be so grateful. Looking forward to hearing from you.

 

Thank you

 

[mvaneijgen]

1 hour ago, CodeTest said:

I will have a look into the snapTo values. Is there a guide or an example where I can find the values at all?

The snap values are a value between 0 and 1 where 0 is the start and 1 is the and, if you want to snap to the middle of the scroll progress you set it to 0.5 in your case you want to snap to specific values, so if you feed it just a number it will snap to increments of that. so 0.1, will snap at 10%, 20%, ect. You can also feed it an array, eg [0, 0.3, 0.45, 1], this snaps to the start, 30%, 45% and the end 100%. With this you can be really specific to where you want  to snap to.  https://gsap.com/docs/v3/Plugins/ScrollTrigger/ check the snap property on the docs, if you want more info. 

 

I'm not completely sure what it is you want, but if I have to guess something like this? I just update the text the current index, you'll also have the set up the onEnterBack call back and do the same on reverse. You could also create and H1 for each card and and stack them right on top of each other with CSS then you don't have to update their content, but you can just show and hide them the same way and with this it will be easier to animate them in and out. But this could be done so many ways. Just try what you think is right and post back here when you get stuck. Hope it helps and happy tweening! 

 

See the Pen poYdBdW?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[CodeTest]

Quote

You could also create and H1 for each card and and stack them right on top of each other with CSS then you don't have to update their content, but you can just show and hide them the same way and with this it will be easier to animate them in and out.

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!
 

See the Pen zYbPXey by Code-Test24 (@Code-Test24) on CodePen

 

I'll investigate and look into the Snap Property in the way I want! thank you so much for the help once again.

[mvaneijgen]

You've compounding animations at the moment, you have a for loop in a for loop, so you'll be creating a lot of animations for the headings, if my math is correct, 7x7x7 = 343, and you want just 7!

 

I've moved your tween logic to outside the call back and created a timeline for it which gets paused on page load and targets just the current index heading. There is no need to create a for loop for the headings them selfs, because we just need an index and there are the same amount of cards as there are headings, so we steal the index from the cards loop and use it to get the current heading. 

 

Right now we just have an onEnter callback, so you also want to set up an onLeave and you also want to set up logic for of you scroll backwards, check the docs if you want a list of all the callbacks https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I'm deliberately being vague here, because if you figure this out you'll be a GSAP ninja and figuring things out on you're own is the best way to learn! But if you get stuck just come back here.

 

See the Pen oNVpgLJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want an even cooler animation you could add a tween to the heading animation which also moves it upwards and place a label between the two tweens (https://gsap.com/docs/v3/GSAP/Timeline/addLabel()/) and then instead of .play() the animation onEnter you tween to the label and on leave .play() the animation the rest of the way https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()/#:~:text=For example%2C to make the,object with the appropriate properties. But I would first figurer out the logic above, before tackling this, but could be a cool challenge if you're up for it. Hope it helps and happy tweening! 

 

 

[CodeTest]

Hi @mvaneijgen 

 

wow 343 animations!... but...

 

with your guidance above its working in the way that I want : 

See the Pen QWoawPO by Code-Test24 (@Code-Test24) on CodePen

 

Quote

I'm deliberately being vague here, because if you figure this out you'll be a GSAP ninja and figuring things out on you're own is the best way to learn! But if you get stuck just come back here.

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!

 

[mvaneijgen]

1 hour ago, CodeTest said:

I think I've got it working in the way that you were guiding... hopefully. Does this make me a GSAP ninja? 😃 

You've got it! I'll instruct some of the GSAP fairies to make you a ninja badge 🤣

1 hour ago, CodeTest said:

However, you've lost me at labels! 🙈 but I do want a cooler animation now you've said it 😂

Oops, now I've planed a seed. My advices check the links I've shared with my comments you should be able to figure it out. You just place a label at the point of a timeline and then instead of .play() tell it to play to that label.  Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

1 hour ago, CodeTest said:

Thank you so much for your invaluable time on this and helping me!  So very grateful!

You're welome! Thanks to te clear demos it was a breeze to work with! Again welcome to the forum and happy tweening! 

[CodeTest]

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.

 

See the Pen BabJLqQ by Code-Test24 (@Code-Test24) on CodePen

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 🙈

[mvaneijgen]

Hard to say, what you could do is try disabling big chunks of your code and then see if the issue goes away and then slowly add small chunks back in to see where it breaks. What platform are you working in, we have also some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

Maybe setting it up in one of the templets also helps you pin point the issue. 

[CodeTest]

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. 

See the Pen BabJLqQ by Code-Test24 (@Code-Test24) on CodePen

 

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?

 

[Rodrigo]

Hi,

 

This is the closest I can get without spending a lot of time in this:

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

 

Unfortunately this is not 100% reliable, but it should get you on the right direction in terms of logic. Also what you're trying to achieve is not simple and is a bit beyond the scope of the help we provide in these free forums.

 

Hopefully this helps.

Happy Tweening!

[CodeTest]

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

[Rodrigo]

1 hour ago, CodeTest said:

The buttons seem so close, any idea whats causing it to skip 2 slides? 

Honestly I couldn't really tell you without digging a bit deep into this, maybe the values are calculated differently by ScrollTrigger than the calculation I'm making on the demo so maybe the value I calculate is passed the one ScrollTrigger uses so that leads to an extra snap. One option could be to prevent the snapping in ScrollTrigger when the user clicks on one of the buttons using a boolean or something like that that can be reset when the snap is completed.

 

For that you'll have to use the snap configuration object with the snapTo key as a function in order to either return the snap value or null depending on the boolean if the either button is clicked (scroll to the snap part and expand the learn more link)

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

Hopefully this helps.

Happy Tweening!

[CodeTest]

Thanks for your time @Rodrigo really appreciate it thank you