Zedandwhite
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Zedandwhite
-
-
1 hour ago, Zedandwhite said:
Thanks again. Much appreciated
Okay so I merged the fake pinning code with my code and everything has stopped working on Codepen (scroll works locally but not pinning). Can you please look into this?
Here's the updated codepen:
Fake Pinning not working with horizontal scroll.
-
2 minutes ago, akapowl said:
...on an extra note:
I would recommend not using the body as the trigger and for pinning, as it might complicate things for you (like getting rid of the horizontal scrollbar at the bottom. Better use your #container instead with a start of 'top top' - and in this case you would also have to add a + 40 on the calculations for the margin-left of your #dataContainer there. This feels better to me at least.
See the Pen
See the Pen 63d7e3e6394e85c8eac9ecafd82aaa60 by akapowl (@akapowl) on CodePen
by akapowl (@akapowl) on CodePenThanks again
It solved a problem that just occurred when I merged this code with actual data. The last div was clipped out of viewport.
- 1
-
3 minutes ago, akapowl said:
As you are not actually scrolling horizontally but just immitating a horizontal scroll with a tween, that won't be possible easily.
You can't just pin things but instead will have to do some calculations for when to stop the tween of each section, to create an effect similar to pinning - something like I tried in this thread here, but it is rather complicated.
There is a pen that demonstrates how you can add draggability via a proxy element in the ScrollTrigger-HowTo collection over on codepen
Thanks again. Much appreciated
- 1
-
12 minutes ago, akapowl said:
Hey @Zedandwhite, welcome to the GSAP forum.
Since margins are outside of the elements in the box-model, they don't add to the elements' width, why handling things with xPercent (which relates to the width of the element) here for each of your sections is not really gonna work out.
Here is a different approach, tweening on the x instead, based on the container's scrollwidth minus the window's width, so it ends flush against the right side of the window - this way you wouldn't have to worry about the margins in between your sections.
This works perfect!
Thanks for your help
While we are at it, can I ask another question related to this design?
How can I pause first black section at the left corner of screen and first grey section should overlap and scroll over it. doing the same for 2nd group. Basically, when black sections reach the left of screen, they get pinned.
Also, how do I make it draggable (horizontally)? I have used Draggable plugin but I only want that to drag in +x position not -x
- 1
-
Hi everyone,
just started with GSAP two days ago!
I'm having a problem with my horizontal scroll layout where sections are overlapping each other to an extent that you can't even view the content in them. Also, a lot of margins are being added. If I put real data in these sections, the last section disappears from the viewport (due to margin/padding being added)
What I want to achieve is horizontal scroll but sections should respect the width and margins instead of overlapping. Please suggest me what should I do...
See the Pen MWoxqZZ by ZedandWhite (@ZedandWhite) on CodePen
Sections are overlapping way too much with horizontal scroll and display grid
in GSAP
Posted
Works like a charm Thank you so much for your help!