2Pacalypse-

Hi @Rodrigo! You know, I was actually already starting to think on how I could move the circle element to be inside the button itself after the pinning ends, but the task seemed pretty daunting. I had no idea Flip existed. That's amazing! That's exactly what I needed, thank you so much. For any other brave souls stumbling on a similar problem, I've updated my codepen to use Flip and it works like a charm.

Hi, I have the following animation: After scrolling for a bit, I need to pin an element After scrolling for a bit more, the pinned element gets unpinned As soon as the element gets unpinned I need to run a tween which translates the element to a specific x/y position On scrolling backwards, the tween needs to play in reverse order I attached the codepen with the minimal amounts of code (I used React & styled-components for ease of use) to show where I got so far. The problem I'm noticing is that when the element gets unpinned, the morphing animation starts playing from initial position of the pinned element, not from the position it had when it got unpinned. I guess this kind of makes sense due to how pinning works (pin-spacer adds position: fixed to the pinned element and then just permanently translates it after it's unpinned). So my assumption is that I would have to do something like this: const morphAnimation = gsap.fromTo( circleRef.current, { y: (index, target) => { // Read the `translateY` value that the pin-spacer added to the // pinned element and start the animation from there? return new DOMMatrix(getComputedStyle(target).transform).m42 }, }, { x: () => buttonRef.current.offsetLeft - CIRCLE_LEFT + BUTTON_PADDING / 2, y: () => buttonRef.current.offsetTop - CIRCLE_TOP + BUTTON_PADDING / 2, width: BUTTON_WIDTH - BUTTON_PADDING, height: BUTTON_HEIGHT - BUTTON_PADDING, ease: "none", duration: 3, paused: true, }, ); But this doesn't quite work for some reason. Is there an official way of reading the position of the element after it gets unpinned? Also, I'm not sure if this same tween can work in reverse, since it's animating into a position: fixed that's added after the element is pinned again on backwards scroll. Any ideas on how to make the reverse animation work as well? Thank you for your help!