Jump to content
Search Community

Pinned sections with items coming from the right

angelokeirsebilck test
Moderator Tag

Recommended Posts

Hi All,

 

I am trying to setup this animation where my pin-items come in from the right. Got it working for 80% but problem is that if i set pinSpacing to false (what i want, becasuse if I  set it to true i get this whitespace between the section) the sections overlap eachother. I nowhardcoded each section's height, but will make this dynamic later so that it will always have the height of the biggest pin-item. 

Also I now set the body height to 4000px so I can scroll, is there a way to 'fake' the height? So I am able to scroll without making the actual page's height bigger?

Any advice is appreciated!

See the Pen BaQpbmJ by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

Link to comment
Share on other sites

 

Hey @angelokeirsebilck

 

I think this is sort of a tricky scenario and since I was interested myself, I gave it a shot.

 

In a case like this it's usually best to wrap all of your content and pin this wrapping element instead, when you don't want the pinSpacing to take its effect of adding spacing for being able move the pinned items - since when you simply set pinSpacing to false, as you noticed, the content beneath that pinned element would scroll over it.

 

This is where the trickiness kicks in, because on one hand you don't want pinSpacing to add space, but on the other hand when pinning that wrapping element you are dependent on the offset (that in the other case  the pinSpacing would create for you), because you are going to want to pin the same wrapping element again later on - thus you'd have to incorporate some calculation to declare this offset yourself.

 

In this following example I chose to loop over all the sections and forEach section add a 'spacer'-value to the start of its ScrollTrigger. The spacer value increases forEach section by the (same amount of the) duration of its previous section's ScrollTrigger (if there is a previous section).

 

With regard to setting the correct height on the body, you can let this be handled by ScrollTrigger too, without having to worry about adjusting it manually.

You would just have to make sure, there is enough scrollable content underneath your sections to make it work. So I chose to add a .footer section for which after the setup of the ScrollTriggers , I make sure, that it has a minWidth of the window's height minus the height of the last section that is being addressed by your ScrollTriggers. This way you can make sure this space will always be respected. 

 

All in all this works pretty well - although it is not responsive to resizes at all yet.

That's something you'd have to incorporate yourself, if you wanted to go with this solution. 

 

I did add a piece of code to set the height of each section to the height of the tallest element inside (plus margin) though - could probably also be refined.

 

See the Pen 4af3c25fc37883a72b901dab68bbbaa9 by akapowl (@akapowl) on CodePen

 

 

I hope this was somewhat understandable and helps you get where you want with this.

 

Cheers,

Paul

 

 

  • Like 4
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...