James0r

I was able to determine that my scroll trigger container size is being recalculated when the bottom address bar appears on iPhone. Here's the full component. <?php $eyebrow_heading = $section['eyebrow_heading'] ?? null; $blurb = $section['blurb'] ?? null; $items = $section['items'] ?? null; $section_wrapper_classes = []; $section_inner_wrapper_classes = [ 'tw-bg-rd-dark-green', 'tw-text-white', 'tw-rd-container-padding', 'tw-h-[102vh]', 'tw-py-20', 'sm:tw-py-0', ]; ?> <div id="scroll-trigger-component" x-data="rendevorDifference" x-intersect.margin.400px.once="refreshScrollTrigger()" x-intersect:leave="console.log('left')" class="<?php echo implode(' ', $section_wrapper_classes); ?>" > <div class="<?php echo implode(' ', $section_inner_wrapper_classes); ?>"> <div class="tw-container tw-flex tw-flex-col tw-justify-center tw-h-full"> <?php if ($eyebrow_heading) : ?> <h2 class="tw-font-medium tw-tracking-widest tw-text-fluid-step-0 tw-mb-8 sm:tw-mb-14 tw-mt-4 sm:tw-mt-0"> <?php echo $eyebrow_heading; ?> </h2> <?php endif; ?> <div class="tw-block tw-flex tw-flex-col sm:tw-flex-row sm:tw-items-center sm:tw-h-[460px]"> <div data-blurb class="sm:tw-flex-[0_0_50%] tw-mb-10 sm:tw-mb-0" > <?php if ($blurb) : ?> <h3 class="tw-text-fluid-step-6 tw-leading-[1.3]"> <?php echo $blurb; ?> </h3> <?php endif; ?> </div> <?php $reveal_pane_classes = [ 'tw-relative', 'sm:tw-flex-[0_0_50%]', 'sm:tw-pl-[min(152px,_8vw)]', 'lg:tw-pl-[min(152px,_12vw)]', 'sm:tw-border-l', 'sm:tw-flex', 'tw-flex-col', 'tw-justify-center', 'tw-overflow-hidden', 'tw-h-[32vh]', 'sm:tw-h-full', 'tw-mt-10', 'sm:tw-mt-0', ]; ?> <div class="rd-difference-divider tw-block tw-h-[1px] tw-bg-white sm:tw-hidden"></div> <div data-reveal-pane class="<?php echo implode(' ', $reveal_pane_classes); ?>" > <?php foreach ($items as $index => $item) : ?> <style> [data-active-index="<?php echo $index; ?>"] .highlight-<?php echo $index+1; ?> { transition: background-color 0.5s, color 0.5s; background-color: <?php echo $item['accent_color']; ?>; color: var(--color-rd-dark-green-500); } </style> <div class="rd-reveal-item"> <?php if ($item['title'] ?? null) : ?> <h4 class="tw-font-medium tw-tracking-widest tw-text-fluid-step-0 tw-mb-4 tw-uppercase" style="color: <?php echo $item['accent_color']; ?>;" > <?php echo $item['title']; ?> </h4> <?php endif; ?> <?php if ($item['body_text'] ?? null) : ?> <div class="tw-text-fluid-step--1 sm:tw-text-fluid-step-0 sm:tw-max-w-[280px] tw-font-display"> <?php echo $item['body_text']; ?> </div> <?php endif; ?> </div> <?php endforeach; ?> </div> </div> </div> </div> </div> <?php if ($section_is_first_instance) : ?> <style> :root { scroll-behavior: smooth; } .rd-reveal-item { opacity: 0; transition: opacity 0.5s; position: absolute; } .rd-reveal-item.is-active { opacity: 1; } </style> <script> document.addEventListener('alpine:init', () => { Alpine.data('rendevorDifference', function() { return { componentEl: this.$el, scrollTrigger: null, init() { this.initScrollTrigger(); // document.addEventListener('scroll', _.throttle(this.refreshScrollTrigger.bind(this), 500)) }, refreshScrollTrigger() { console.log('refreshing scroll trigger') this.scrollTrigger.refresh() }, initScrollTrigger() { const items = gsap.utils.toArray(".rd-reveal-item") const componentEl = this.componentEl let currentIndex = 0 this.scrollTrigger = ScrollTrigger.create({ markers: false, trigger: this.componentEl, start: `top top`, pin: true, normalizeScroll: true, end: function() { return '+=' + window.innerHeight * items.length }, toggleClass: 'is-active', onEnter: function() { items[0].classList.add('is-active') componentEl.dataset.activeIndex = 0 }, onLeaveBack: function() { items[0].classList.remove('is-active') componentEl.removeAttribute('data-active-index') }, onUpdate: function(self) { const previousIndex = currentIndex currentIndex = Math.floor(self.progress * items.length) if (previousIndex >= items.length || currentIndex >= items.length) return if (previousIndex !== currentIndex) { items[previousIndex].classList.remove('is-active') items[currentIndex].classList.add('is-active') componentEl.dataset.activeIndex = currentIndex } }, }) } } }) }) </script> <?php endif; ?>

My code looks like this.scrollTrigger = ScrollTrigger.create({ markers: false, trigger: this.componentEl, start: `top top`, pin: true, normalizeScroll: true, end: function() { return '+=' + window.innerHeight * items.length }, toggleClass: 'is-active', onEnter: function() { items[0].classList.add('is-active') componentEl.dataset.activeIndex = 0 }, onLeaveBack: function() { items[0].classList.remove('is-active') componentEl.removeAttribute('data-active-index') }, onUpdate: function(self) { const previousIndex = currentIndex currentIndex = Math.floor(self.progress * items.length) if (previousIndex >= items.length || currentIndex >= items.length) return if (previousIndex !== currentIndex) { items[previousIndex].classList.remove('is-active') items[currentIndex].classList.add('is-active') componentEl.dataset.activeIndex = currentIndex } }, }) The trigger is working as expected on mobile but once I get past the scrollTrigger section and to the accordion section below it and I tap one of the buttons the section expands and it intermittently up or down. I can try a minimal reproduction but just wondering if there are any known fixes with the information provided. Thanks!

I cannot for the life of me figure out what calculation I can use for the scroll trigger bottom and the .demo-gallery duration that we're shifting. I'm trying to get things aligned so that the item expands exactly when it hits the top top trigger. I removed the gaps to debug but that didn't help much. Any tips? https://codepen.io/James0r/pen/RwvroxK

Oh yeah that's much smoother. I played with the SmoothScroller plugin for a moment but realized I'd probably have to do something manually. That pinning the container and slowly translating in Y was the key. Thanks again for your help!

Okay. I guess my next job is trying to achieve that while using the wrapper as the trigger and staggering.

This is a bit buggy, but I think it demonstrates what I'm trying to do. https://codepen.io/James0r/pen/NWoGOZE

Awesome. Lots to chew on. I feel like I'm still stuck on how to increase the time while the items are expanded. I'm reading about scrub and stagger more and I take it that's the key. I get it now that with scrub enabled, it divides the scroll trigger into as many tweens as are found in the nodelist returned by the the trigger selector. If I'm understanding that right. I hear what you're saying about making sure the animation is solid first without scroll trigger, but my animation is looking fine, the scroll triggering is my issue.

I think what I'm failing to understand is how a stagger duration is being used here to trigger the animation. As I changed things a little bit the triggers are all over the place now and I'm not seeing how these are determined. https://codepen.io/James0r/pen/NWoGOZE?editors=1010 I'm noticing now I also don't have markers on my items so I'm a bit confused about that.

@mvaneijgen Thank you! That's very close to what I'm trying to do. Still a bit of your solution I don't understand. Still pretty new to GSAP. I see you use the stagger constant as a third parameter to gsap.to() but I don't see anything in the docs about a third parameter https://gsap.com/docs/v3/GSAP/gsap.to()/ . What does that do and where can I learn more about that?

As you can see here https://codepen.io/James0r/pen/GRzpGWm I'm wanting to expand the item to 600px height gradually and i want more vertical scroll before collapsing it. I tried calling ScrollTrigger.refresh() on the onUpdate event, but maybe this is causing some mathematical issue. What the right approach to achieve this? Thanks.

Thanks. I changed my fromTo() to use translate instead of fixed positioning, but I'm not sure how I would achieve the faked curved path with x and y if I'm using them already for my from and to coordinates. Can you provide an example?

It might be super basic and perhaps textPath is the way to go, but just thought there might be some helpers that auto-magically help with this. Here's my minimal reproduction: https://codepen.io/James0r/pen/mdajqeO I'm working with words transitioning from their place in a paragraph up to their final location. Because of this they will be at different X coordinates within the paragraph. I want them to follow a smooth curved path to their final destination. Something like the images below:

I see the MotionPathPlugin is for animating along a fixed path (I think). So maybe I'm looking for something different. I'm animating some text between points on the viewport using fromTo() and instead of taking a direct path, I want it to travel along a curve. To be clear, I'm not talking about easing/timing. Any help much appreciated.