livlove

Hey guys! Thanks a bunch. I was able to work with the code and get exactly what I needed. Since I wanted the trigger a bit later, I've added a delay to it, and it seems to trigger at the center of the block now, whilst the .purple still appearing at the top of the screen. Beautiful library. Here's my final piece! codepen Just need to get it into the real site now. Thanks for all your help @mvaneijgen and @GreenSock.

The most recent version you sent over brings in .purple, full height, over the 'whoosh' section - but doesn't slot into place afterwards, since .purple is fixed. The previous version you sent, .purple wasn't full height, but did slot into place afterwards. The most recent one you've sent solves all the previous issues I had (like incorrect alignment of .purple, .purple scrolling on only the x axis), however, it looks like after sliding all the way out, it would stay fixed, and therefore would cover the rest of the page. Is that correct? If so, how would this be solved? This is why I was trying to use pin previously. This video at 0:49 - 0:51 is the kind of animation I'm trying to create: Thank you!

Hahaha omg I'm so excited! Yeh this is great - but then without a pin how would the user continue scrolling through the rest of the sections below once the animation (from -100% to 0) is finished?

Hey guys, Thanks for much for the swift response and feedback, it's super useful. @mvaneijgen thanks for the adjusted code. If I'm unable to implement the animation how I'd like for now, I will likely go with this as it makes much more sense to me. The reason I had set the position to fixed is because I wanted .purple to slide out from the left of the screen at full screen height, on a start: top center trigger. I'm curious how else this might be possible. @GreenSock, with your example, if I wanted exactly the same animation and trigger, without position: fixed, how would I make it so that the purple section filled the entire screen instead of being pushed up how it is? Everything else about it is perfect, it's just that top value offset from triggering at center instead of at top. Thanks in advance for all the help already

Hey guys, I've been hacking away at this for some time and I'm really stuck. I have achieved most of what I want, but the pinned element won't stick to the top of the viewport. Some things that I've noticed: If I scroll to the position where my trigger and start position are on the same pixel, and refresh, then scroll down, the .purple div will be at the top of the viewport If start at the top of the screen where my initial scrolltrigger is around 500px from the start trigger, then scroll down to the start trigger, the .purple top position will be -500px I've tried to set fixed, absolute, height: 100vh, 100%, and top: 0; bottom: 0; Some questions I've got: Is there a way to set what an element pins to, instead of it pinning to the trigger? Why is the offset of the trigger and start point adding +/- top values to the pinned section? Does ScrollSmoother help solve this? Thanks in advance for any help! Going to keep trying now :]