Scroll Trigger - control animation playhead with scroll while blocking page scroll

smarterdigitalltd · January 24, 2021

Hi everyone

I'm fairly new to GSAP/ScrollTrigger (and it's incredible...) - so I might well be missing something or misunderstanding. I did find 1 or 2 other threads for similar requirements eg https://greensock.com/forums/topic/24622-i-want-to-stop-scrolling-untill-the-animation-ends-in-gsap-3-how-to-do-this/

What I'm trying to do is have a non-full-height <div> that contains x number of child elements that will be animated with a timeline. What I want to achieve is to scrub the animation using scroll, while locking the body scroll until the timeline has concluded, and while keeping the container within the normal flow of the document - not with whitespace around it.

Pinning the container seemed like the solution, but after playing with it, it doesn't seem to be as whitespace develops above or below the container. When you use a full-height container (as per most GSAP demos I've seen) it’s taking up the whole viewport, so the “issue” doesn’t occur/isn’t visible.

If I use pinSpacing: false in the ScrollTrigger config, it almost feels like it’s closer as the whitespace disappears, but then the container gets pulled down the page on scroll. I want to keep it in its position, and control the animation playhead with scroll.

If you look at this GIF you'll see the placement + lack of whitespace that I'm trying to achieve, when I don't set pin. But of course, the element scrolls off the page before the animation has completed. https://share.getcloudapp.com/7Kup4GQo

I saw a suggestion in the above thread to lock the overflow of the <body> at the start of the timeline and vice-versa at the end, but I found that this property got set on page load, and not when the trigger was… triggered.

Lastly, I’m also wondering whether the end property of the ScrollTrigger config has something to do with it. If I set the end property as the height of the container, it keeps the element in the flow of the document (but the scrubbing is done over a very small distance and zips thru far too quickly). If I set end to be the width of all of the children combined, the cadence of the animation is ideal, but then whitespace fills the screen below:

Screenshot when end is container.offsetHeight: https://share.getcloudapp.com/nOul6xNK
Screenshot when end is (container.children.length * container.offsetWidth): https://share.getcloudapp.com/2NuEdOXd

If anyone is able to give some pointers I’d greatly appreciate it! Thanks

See the Pen PoGrYgB by smarterdigitalltd (@smarterdigitalltd) on CodePen

smarterdigitalltd · January 24, 2021

I think I've solved it but is subject to further testing. The solution was to simply pin the <body>

Code: https://share.getcloudapp.com/xQunP2BR

Result: https://share.getcloudapp.com/Z4u6bRWd

Edit: don't pin your <body> tags...! But it seems to have the same desired effect if you pin an element that wraps your page.

Notifications

Messages

Scroll Trigger - control animation playhead with scroll while blocking page scroll

Recommended Posts

smarterdigitalltd

Link to comment

Share on other sites

smarterdigitalltd

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members