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 ?

Thanks Cassie! Working with the Lunch dev crew on a solution and here's where we're at: https://codesandbox.io/s/empty-sun-o3h0yq?file=/pages/index.js No console errors but the images in the demo aren't being properly animated by the Flip plugin - they flash on screen after a delay. Anyone available to take a look?

I get the same error when importing as follows: import { Flip } from "gsap/dist/Flip"; import { gsap } from "gsap/dist/gsap";

Thanks! Codesandbox is giving me server errors so I have a local Nextjs setup attempting to create an implementation of the Vue example here: https://codepen.io/cassie-codes/pen/LYQaOBm Running into an error when calling Flip.getState in the effect cleanup: TypeError: Cannot read properties of null (reading '_gsap') import { Flip } from "gsap/dist/Flip"; import { gsap } from "gsap"; import { useEffect, useRef } from "react"; function Potions() { gsap.registerPlugin(Flip); let iconRefs = useRef([]); useEffect(() => { let iconRefValue = null; if (iconRefs.current) { iconRefValue = iconRefs.current; Flip.getState(iconRefValue); // Works } return () => { if (iconRefValue) { Flip.getState(iconRefValue); // Doesn't work } }; }, []); return ( <> <img className="avatar flipMe" ref={(el) => { iconRefs.current.push(el); }} src="/person.svg" /> <img className="potion flipMe" ref={(el) => { iconRefs.current.push(el); }} src="/potions.svg" /> <img className="spell flipMe" ref={(el) => { iconRefs.current.push(el); }} src="/spell.svg" /> </> ); } export default Potions;

Thanks! Looking for a react example (nextjs specifically) but I’ll reference the above and see if I can link a workable demo ?

Any update here? ?

Also looking to recreate this effect in a Nextjs application – anyone have an example or two they could share that uses the Flip plugin?

Attempting to create a similar effect in a Nextjs application – anyone have an example they could share?

The following component override (using ScrollerMotion library) seems to do the trick. Still need to try with GSAP Scroll Smoother. import type { ComponentType } from "react" import { ScrollerMotion } from "scroller-motion" export function withScrollerMotion(Component? ComponentType { return (props) => { return ( <ScrollerMotion> <Component {...props} /> </ScrollerMotion> ) } }

Has anyone managed to integrate Scroll Smoother with Framer?

I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.