Ian Robinson

I haven't used GSAP in a year or two and feel I'm starting from scratch again. What seems like a very basic animation feature is eluding me despite reading through multiple sources about solutions. How do I get the pinned grey box (.copybox) to stay pinned in the center of the screen for a few hundred pixels past the bottom of the section as I scroll before unpinning and continuing to scroll up with the page (in this case when the turquoise box (.boxholder) meets the bottom of the grey box)? Thanks in advance!

Yes! Thank you Jack. I had hastily stripped out much of the code to give you a basic idea of what I was trying to figure out which is why some of the items are funky or non-existent, but appreciate it!

Hi Jack! Sorry about that as I didn't double-check how it looked in the smaller view which made it even more confusing so I trimmed it down in a new pen. I wrote in the JS for it to run the animation of the header and paragraph to animate in when the section is in the viewport. It works fine for the first section (header fades in from side, paragraph from bottom) the first time, but when you scroll to the next section it doesn't quite work as ultimately I'd like the animation to run in reverse as you're leaving one section while forward in the next section so you see animation regardless of if you're scrolling up or down.

Been hacking away at this and managed to target each panel as it comes into viewport, but having trouble figuring out how to have the previous panel run reverse animation as the one I'm scrolling into runs regular/forward. Or at the least have the previous animation simply reset so when scrolling back up you can see it happen again. The "best" I've been able to do is make the next panel run reverse along with the previous. Feeling it more has to do with my JS (which is not my strong suit).

Thanks again akapowl (I believe you helped me with my previous issue as well)! But yes, you addressed my questions as I was pretty sure I could work it out if I rewrote the whole thing as you implied, but wanted to know if it was possible with just a couple adjustments/edits to the code I already had.

Stripped a project back to basics and rebuilding an element at a time. Now I've spent a couple days trying to figure this one out but keep hitting roadblocks (or CodePen crashing on me for some reason). Attempting to add in a div of a smaller size than the others but only managed to partially get it to work – I have the gap, but the panel moves at a different rate. I found a snippit along the lines of x: () => `-${maxWidth - window.innerWidth}`, but obviously it's only a small piece of the puzzle and feel I'd have to rebuild what I did to make it work so trying to figure out if it's the only option or if what I have can be edited relatively easily to accomodate.

Thank you so much, Akapowl as admittedly that was my next hurdle I've been trying to get over as trying to get the proper guides has been a bit of a struggle as initially I was trying to eyeball/guess what was happening off-screen and I had come across that specific tutorial and was working through trying to figure it out so your CodePen is much appreciated!

YES! I admittedly am having a tough time wrapping my head around some of the nuances of GSAP and find myself stumbling over the smallest things. I will definitely take a close look at your solve and hope it will stick. Thank you so much, Craig!

I've been working at this for days and at best I was able to get the "X" to slightly grow on scroll by adjusting the numbers (and when I put it in CodePen it doesn't work at all which is a flag) as ultimately it seems so basic to me but I'm obviously overlooking something very simple as: gsap.from(".st0", {duration:5, drawSVG: 1}); does exactly what I want it to do running the animation independently, but when I link the animation with the sidescrolling it only does a middle fraction of the animation. Basics: I want the "X" to grow from maybe 50px line lengths all the way out to the edges by the time it's about scrolled off the screen and please let me know where I'm messing up.