Jump to content
Search Community

Deciphering an end function in this horizontal section

Mattrudd test
Moderator Tag

Recommended Posts

'Sup GSAPpers!

 

Wondering if you generous bunch could help me... I'm modifying a horizontal scroll example that I'm pretty sure @akapowl shared on here to incorporate a black to white difference transition before the pinned horizontal section scrolls up.

 

I've managed to pull this off, but what I'm struggling with is shortening the length of the horizontal scrolling section. It stems from not fully understanding the Scrolltrigger end function:

 

      end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),

I've tried modifying the widths of all the different elements including .pin-wrap and .animation-wrap, but the length of this section is obviously set by this end function.

Sure it's simple enough when you know... but "+=" used in this way is new to me... is it an addition assignment? Tried to unpack this on my own but not got very far (late here in the UK, which isn't helping!)

 

I think once I get my head around this I'll be able to shorten the horizontal section and have the text pin centrally in the viewport while it transitions black to white before unpinning vertically up.

 

Hope that's a good enough explanation?

Thanks you lovely bunch.

See the Pen MWqoyjp by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

Are you trying to get the horizontal movement to stop when that text is centered? It's more of a CSS issue than anything GSAP/ScrollTrigger related. 

 

It also has nothing to do with the ScrollTrigger's end, but just to clarify, the "+=" prefix is only valid on end values (fine here) and it simply means "relative to the start", so end: "+=100" would mean "100px past where the start is". It's quite convenient actually. Like if you want your pin to last exactly 500px, all you gotta do is say end: "+=500". Done.

 

In your demo, the problem is with how far you're animating the "x" value in your tween. It's going too far to the right. But all that is caused by the fact that it's set up to move it exactly far enough to where the right edge of the content hits the right edge of the screen. It looks like you've got your CSS set up in a way that looks odd to me, where your text has a bunch of extra space on the right side of it. The container is set to width: 200vw, and inside that you've got padding-left 20vw. And a min-width: 65vw. It's just all a bit convoluted from my perspective, but that's probably because I don't really understand what you're trying to do. 

 

One solution would be to just fix your CSS so that the copy is centered in its container (doesn't have a bunch of extra space on the right side). Or you can reduce the distance x travels. 

 

In summary, the problem is most likely your CSS (get rid of all that space to the right, although the more I look at it maybe you actually need that for your mask that's moving over). But if you want to leave your CSS as-is, then the solution is more related to this: 

var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); 

And not the ScrollTrigger's end value. 

 

I hope that helps!

Link to comment
Share on other sites

@GreenSock
 

Thanks, I think I'm a little wiser - I've balanced the CSS values like that to try and get the difference mask moving over...

 

That's correct - I'm wanting the horizontal movement to stop when the end text is centred, then the difference mask moves over, then once the section is all white, it unpins and moves up to continue the vertical flow of the page.

I've got very close to balancing it all better than the above pin, and then got confused again with all the width settings!

Apologies that it turns out to be a CSS not a GSAP issue thought - I'll colour up the different elements and try and work it out!

One thing though - I've used the 'relative to the start' prefix a fair bit recently, but what threw me with this example is the "+=" without a numerical value following.

Link to comment
Share on other sites

7 minutes ago, Mattrudd said:

Apologies that it turns out to be a CSS not a GSAP issue thought - I'll colour up the different elements and try and work it out!

No problem! Good luck. 

 

8 minutes ago, Mattrudd said:

One thing though - I've used the 'relative to the start' prefix a fair bit recently, but what threw me with this example is the "+=" without a numerical value following.

This does evaluate to a number following the "+=":

end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
  
// evaluates to something like this: 
end: () => "+=" + 3020

// which can be thought of like this: 
end: "+=3020"

It's just dynamic, that's all. Does that clear things up? 

Link to comment
Share on other sites

Ah of course! That makes sense.

Now to get my head around the solution related to:

var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); 

And also need to properly grasp ternary operators e.g.

    x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() 

 



 

Link to comment
Share on other sites

Gotcha - an if else statement. Thanks!

 

The minus in front of the brackets in the first one I quoted throws me... 

 

Incidentally, I ended up going back to the template to reset all the widths I'd edited and confused!

 

See the Pen PodjLMO by matt-rudd (@matt-rudd) on CodePen



Think I've got there... the last panel with the mask is just shy of being responsive, as my clunky way has to cater for the left padding of the first block (I wanted this so that the horizontal content sweeps into the viewport from the right rather than simply going from still [in-view] to moving)

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...