trusty97

Thinking a little more on this... what if I used a piece of state to switch scrub: true to scrub: false using onLeave, then reset it to true onLeaveBack? Is there a way to make that work? See codepen for a modified example (that does not work): https://codepen.io/pdnellius/pen/ExLwewJ

Ah ok I was afraid that might be the case ? but thank you for the quick response!

Hi there, I'm currently using ScrollTrigger with toggleActions to scrub an animation while it moves along the ScrollTrigger, and I'm using toggleActions to attempt to only have that animation play only when entering, and then reset and play again after you scroll up past the start again (onLeaveBack). The in-between states should simply show the completed animation state until you get back to onLeaveBack. I thought that this could be accomplished via toggleActions, but I'm noticing that if I use scrub the animation still scrubs back and forth, seemingly ignoring any options passed to toggleActions. I know I could do this manually using onUpdate to progress the item manually, but then I lose the ability to give scrub a value scrub: 3. Maybe I'm misunderstanding the toggleActions option? I'm attaching a very simple codepen to illustrate the issue.

That worked! For anyone looking for example code with the solution in place, see this codesandbox: https://codesandbox.io/s/dreamy-rain-lv0td2?file=/src/App.js

I'm having an issue using ScrollTrigger.normalizeScroll() with a scrollable div. I enabled allowNestedScroll: true but it seems as though the page scrolls a bit whille scrolling the nested area. A simple example is available here: https://codesandbox.io/s/blissful-jones-6tz35t?file=/src/App.js You can see when ScrollTrigger.normalizeScroll() is enabled, it will scroll slightly along with the nested scroll area. I'm seeing this in Chrome 103. Am I handling this incorrectly or is there another way to get only the nested area to scroll?

It appears as though the ease property does not accept a function returning a default ease string (such as 'power4.out' ) as a value. I know there is language around it accepting a "function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value" but it'd be great if I could use a function to return a preset easing value based on some condition in the browser (such as resizing the window). Condition: gsap.to(el, { ... ease: () => (condition ? 'power4.out' : 'none', ... } Expected: Preset easing value set based on ternary function. Result: GSAP tween breaks and no longer works. I've included a codepen that demonstrates this not working. Is there any way to do this? Any thoughts here are greatly appreciated!

Yes! Thank you!

@Visual-Q still not quite there. The box should un-pin itself once the top of the footer reaches the bottom of the viewport.

@Visual-Q unfortunately, this is still not what I'm looking for. - The box's opacity should go from 0 to 1 starting when the top of Area 3 reaches the center of the viewport. Additionally, box should be pinned vertically center within the viewport at this time - The box should un-pin once the top of the footer hits the bottom of the viewport

@Visual-Q apologies for that, almost what I'm looking for. - The first trigger animates the opacity of the box within area 3 only, and should finish animating opacity by the time Area 4 reaches the viewport. - The second trigger was intended to pin the box in the center of the screen when the top of Area 3 reaches the center of the viewport and unpin once the top of the footer reaches the bottom of the viewport.

Hi there, i'm having trouble with absolutely positioned vertically centered content using top: 50%; transform: translateY(-50%) along with pinning using ScrollTrigger. The .box should be vertically centered (it's currently hanging at the bottom of the screen), and if you disable SrollTrigger's pin, you'll see that the item is vertically centered within that section. I'm including a codepen that demonstrates the issue. Anyone have any tips? https://codepen.io/pdnellius/pen/JjEdBJR