Snap on Pinned Items on a Section w/ SVG

[Ted Moso]

Hi,

 

I'm practicing on applying snap on pinned items on a section block. I've even set up an svg. It's more complex than a basic pinned content. I set it up the content and pinned it in a way that it stays on the bottom and svg on the top as it slides to the next item. I think it's going the way I want it to, at least, the "pinned" part. But my snapping part of each item is weird... There are times where the content on the first item doesn't show if I snap from the bottom. And also, when I try to snap to the last item (#4) it quickly jumps to the next section (which is just basically a red background for placeholder). On the same item (#4), when I snap from the red background section (scrolling up) it jumps straight to the third item (#3). I've been spending a lot of hours just trying to figure it out and no luck. Can somebody take a look at this and see what I need to do to fix the snapping problem? I'm pretty much stuck. Any kind of help would be appreciated.

See the Pen dymZgvE?editors=0010 by HereToLearn101 (@HereToLearn101) on CodePen

[iDad5]

Hi Ted,

I tried commenting out the svg and set the height of the containing div to the same one it has with the svg in it and I couldn't see any difference in the scroll behavior. Are you really sure that the svg is the reason for the unexpected behavior?
I have to admit though, that I'm not sure, if I actually did understand your description of what isn't going as you wanted it to.

[GreenSock]

I read your post a few times but I'm still pretty lost about what you're asking, sorry. 

 

From what I can tell, ScrollTrigger is doing exactly what you're asking it to do. I see no problems. I figured maybe you're having a hard time visualizing where you're putting the snapping points, so here's a fork that adds a blue line for each snapping position (where the blue line would be at the top of the viewport):

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

 

I don't understand why you're using a different endTrigger or why you want it to end where the bottom of that element hits 20% from the top of the viewport. I'm not saying it's wrong - I'm just saying I don't understand what you're trying to do. But maybe the help with visualizing the snapping points it'll nudge you in the right direction. 

 

If you still need help, you'll significantly increase your chances of getting a good answer if you simplify your CodePen a lot more. You probably don't need almost 250+ lines of HTML/CSS/JS just to illustrate the issue you're struggling with. Try to get it down to the absolute bare bones because usually when you do that, you'll stumble across the answer yourself. You can slowly build it up until it breaks and then you'll know exactly where the issue came in. 

[Ted Moso]

Hi @iDad5 and @GreenSock,

 

Thank you for the reply, and sorry for the confusion. I have a hard time describing my issue with just text sometimes. But I'll try to explain it again with snippets. The issue is basically the 4th item that I'm trying to snap into. If I come from the 3rd item, or where it says "Upcoming Events 3", and I try to snap to the 4th item, I get this result:

 

What I'm trying to accomplish is to snap to the 4th item like this (snippet below):

 

But it's not doing that.. it looks like it's skipping the 4th item as I'm trying to snap into it. I hope showing you the snippets explains it better. Let me know if there is still a lot of confusion.

 

I think there is something wrong with my current css or html set up. Or I just need to set up my tween better. I'm still very new to GSAP, so there's a lot of it I don't understand. But I am not giving up! lol. I really like this library. In time I'll understand better and get better with this. Again, any advise or change on the code that I need to do are very much appreciated.

 

@GreenSock Thank you for setting up that blue line. Read your code on how your setting that, but not understanding it yet lol. Although, It's helping me and it's showing that the fix I need to do has to be how I'm snapping the items. I'm looking into that now. And I'll listen to your advise and try to simplify my codepen better.

[GreenSock]

Yeah, I really don't know what you're trying to do with all the values you've got plugged in there but it's working the way you've asked it to. 

 

For example, on your snapping stuff you've got it ending here: 

endTrigger: '.ls-section-parallax-vertical .ls-section__pv-item:last-child',
end: 'bottom 20%',

So when that last child's bottom is lined up with 20% down from the top of the viewport, that's where it'll end. Your snapping is happening there correctly (the white part only shows in 20% of the viewport while the red fills the lower 80%), but you're saying you don't want that. 

 

Also, this isn't valid: 

start: 'top',

It should have two values, space-delimited like:

start: "top top",

It looks like you're doing a gsap.from() when you're not even animating anything (the tween is empty). I assume you're depending on a CSS transition that's triggered by the "active" class you're adding/removing? That's fine, but then there's no reason to have a "scrub" define (that scrubs the playhead of the tween with the scrollbar position...but you're not tweening any values). 

 

I'm taking a shot in the dark that maybe this is closer to what you want: 

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

[Ted Moso]

@GreenSock

 

That's actually what I'm trying to accomplish.

 

I didn't even realize that

start: 'top'

was invalid. For some reason, I was thinking that it would default to

start: 'top top'

 

Thank you for pointing out a lot of my mistakes there. I'm learning a lot from your input. I'll keep those in mind as I'm moving forward with other projects using this library. Also, it was very interesting that you could put a logic in "pin" like as you did:
 

pin: i !== (pvItems.length - 1) ? pvItem.querySelector('.ls-section__pv-item-content-container') : false,

I didn't know that this was something I could do.

[GreenSock]

No problem. Happy to hear it was helpful. Don't worry - once you work with the tools a bit and plow through the docs, you'll see how much sense it all makes and you'll feel like you've got animation superpowers.