jhob101

Amazing! Thanks so much for your help, very much appreciated.

I've modified the pen and have this working, save for one bug: If you scroll back up and scroll back down they animate back into visibility, but it looks odd because they're already visible. Is there a way of disabling the animation once they're visible so that it doesn't play again?

That sounds like exactly the thing! I'll check it out, cheers.

I've created a ScrollTrigger to animate in lots of elements on the page as they become visible. What I'd like to do is be able to combine that with offset so that each group that appears on screen, they will animate in with a slight delay each. At the moment they all appear at once, which is to be expected as each has its own timeline. My thinking is that I'd need to somehow get all the elements that become visible at (roughly) the same time onto the same timeline so that can then use offset. But I can't think how that's possible, and I'm sure there must be a simpler solution. Is there a way to achieve this?

@OSUblake thank you SO much for that detailed response. I've been through your suggested code and have now implemented a version of it. It was really helpful that you explained the purpose of why it was structured like that. I'm off to have a read through the 'Common mistakes' now. thanks again!

This is my first go with GSAP so probably making some basic error here. There's a calculation based on content height to determine positioning of the overlay so that only the heading is shown in the default state. a) I'm not convinced I'm doing the overlay positioning in the best way so if there's an easier and more reliable way to achieve this, please let me know! b) When the window is resized the items become invisible. I tried to call the init() function to re-initialise it but this doesn't seem to work for a reason I can't work out. Any ideas what's up? Thanks in advance for any help!