hybrid09

That was my first approach, the trouble I had with that was toggling a class with the timeline.

Thank you for replying @ZachSaucier, How would I make it so that the next scrolltrigger won't start without the previous one ending, do I have to individually define the triggers? If I change the end time it will make the scrolltrigger longer but the one after will have already started without the prior ending.

Hey Zach, Is there anyway for me to increase the time/distance between the scrolltriggers? The buttons are scrolling one after another and I would like there to be some time gap after each button. I made a small demo: https://codepen.io/mallabiplav/pen/ExgvBzW

@ZachSaucier This is a much better and simpler way of what I was trying to achieve. Thank you! Cheers!

Hello @ZachSaucier @GreenSock @akapowl, Thank you all for replying so quickly. I am sorry that the demo was confusing and did not convey what I wanted it to do. I have put a part of my code, it is a bit dense but I hope that is okay. I did as @GreenSock said, the top padding works, but the bottom does not? Am I missing something? https://codepen.io/mallabiplav/pen/rNMOYZy

Hello everyone, Lets say I have a full page, and I have a panel inside it with margins of 2em each. I have two panels inside that use scroll triggers. I would like the panel to maintain all margins, how do I go about creating that? In the first picture below, the red is the margin I want to maintain with the left and right panels being able to be pinned. The second picture is what I am facing, the margins on top and bottom are not maintained when left and right panels are pinned.

@akapowl That was exactly what I wanted. I was trying to emulate my scroll trigger from a previous post and that had the translateY in the css itself. Did not realize that was the problem! Thank you for your help! That was perfect.

@GreenSock I read the post and even then completely missed the note. This was my bad. That seemed to have been the problem that was messing with the scroll trigger.

Hey everyone, I'm trying to accomplish a simple pinning, it worked initially but after I tried to add a reveal panel the pinning shows weird behavior (will not pin). After section 3 reveals itself from underneath section 2, I would like the left box to pin itself. This is a basic snippet that I created from my actual project. The pinning and everything else worked fine without the reveal. Thank you.

These are awesome. Thank you so much @mikel. You all reply so quickly. Thank you!

Hello everyone, I have been wondering how I would pull a circle chart off maybe either animating on scroll or reacting to scrub. I envisioned something like the codepen I linked, it is a plugin though, I hope that will not be a problem. Thank you.

@ZachSaucier Thank you for welcoming me and replying so quickly! That is what I needed, spent the whole day trying to figure it out. Your help is much appreciated. Thank you for the side notes too, I made a demo as fast as I could and used names that came into my head first.

Hello everyone, I am new to GSAP and have been playing around with it, I have been trying to make a slideshow kind of thing on scroll where I pin a sidebar and the other side has a changing paragraph/heading. I am using flex with two divs inside and pinning the left one. When my scroll trigger hits and pins the left div, the size of the right one changes. Help would be appreciated.