2Pacalypse-
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 2Pacalypse-
-
-
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!
See the Pen WNaLYyX by 2Pacalypse- (@2Pacalypse-) on CodePen
Translate the pinned element after pinning "ends"
in GSAP
Posted
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.