velkas

Perfect, thank you!

In the linked code sample, the button transform is not smoothly animated and appears to speed up instead of maintaining a constant velocity. Am I missing a CSS prop or a default override?

Perfect, thanks!

I'm animating cards (checkpoints) on a horizontally scrolling roadmap and the cards fade in as they enter the viewport. The first three cards should be immediately visible because they are all either passed or very close to the end of their scrolltriggers (so their opacities would be ~1). These cards which should be initially visible actually fade in simultaneously only after the roadmap is pinned. How can I "evaluate" the initial animation state and ensure the cards at the beginning of the roadmap are visible on page load, not just after the pin is activated?

See the following on mobile: https://sapient-industries.webflow.io/ The first animated text section appears to function correctly but the second two seem bugged and start much sooner than they are supposed to. Everything works fine on desktop. I'm using the same code as in the codepen I made earlier: https://codepen.io/connorhansen/pen/bGMJVYK?editors=1100

Ok thanks I'll see what I can come up with. Here's the pen with absolute positioning: https://codepen.io/connorhansen/pen/bGMJVYK

Ahh thanks!! That's much closer to what I'm trying to achieve. I took it a step further but the alignment isn't ideal... should I use absolute positioning for the animated text so they are on top of each other? Ideally the text also snaps to prevent overscrolling. https://codepen.io/connorhansen/pen/bGMJVYK?editors=1010

This is closer to what I'm trying to achieve but I'd like to chain the text animations while the parent section is pinned. In other words, I'd like to scroll through all animated text items before unpinning the parent section and scrolling to the next section. https://codepen.io/connorhansen/pen/gOzyawx?editors=1010

I think the solution is to replace var scrollHeadings = gsap.utils.toArray(".animated-text", section); with var scrollHeadings = section.querySelectorAll(".animated-text");

As you can see in the demo, I have duplicated sections with the same content structure and selectors. I'm attempting to use gsap.utils.toArray so I can iterate over the animated text but it seems to only be grabbing the first of each instance instead of three instances per section. Any ideas?

So after much debugging, the following "works": https://codesandbox.io/s/dazzling-estrela-kj4qkf?file=/pages/index.js Only thing I'm not sure of is why it only works when the following line is present in the effect cleanup: Flip.getState(flipEls); Demo breaks if that line is removed. No idea why... ?‍♂️ Any ideas?

Thanks @Rodrigo! I'll take a look at those resources and post back with any developments ?

Yeah, no luck there - it's stumping them too. I'll make a post on SO and report back ?

Any React gurus available to help out? This is where I'm at: https://codesandbox.io/s/cool-moon-y1wcni?file=/pages/index.js

Thanks for your help @Cassie ? Hopefully someone can step in and help get this across the finish line ?