rebekahans

So simple and completely solves my issue - thanks so much!

Yes, pinSpacing: false makes the text go under the header div, which is not right for me because then the user will not be able to see it. The header on my website features a video and the height is 600px, 100% of the browsers height would be too big for what I am trying to do. I want the text to fade out and in and only once this is finished the user can scroll the rest of the web page. Maybe this could be achieved without 'pin' but I am not sure.

I have created an animation where elements transition in a header div at the very top of a web page as soon as the user starts scrolling. The container is pinned until all elements have finished transitioning, however there is a lot of white space under the header div that decreases as you scroll. I understand this is there because of end: "+=250" - if I change this to 0 the white space is gone but the animation happens far too quickly. Please see a stripped back version in the codepen (view full screen to get the full effect of the white space). How can I keep the header pinned until the elements have finished animating, but have the rest of the website content in view and fixed in place as normal?

Hello! I am new to GSAP and am really enjoying applying different animations to my projects. I am now trying to achieve something a little more complex and wonder how (if at all) it could be achieved with GSAP. I have created a basic slider that clones the parent div to create an infinite loop. What I'd like to do is control the direction of the animation with my mouse - so if the mouse moves left / right / up / down the content moves and changes direction with it. https://www.themill.com/ - this is the sort of movement I am trying to replicate (click the cross to start the animation). My infinite slider is based on this CodePen. Any help or pointer in the right direction is greatly appreciated!