hunterbecton

Thanks agian, Rodrigo. Is a timeline the best approach for handling the animation of the added/removed from the DOM alongside the Flip animations?

Thank you to everyone who's helped me get to this point, but I need help understanding why elements are unavailable in the onEnter and onLeave callbacks in Flip after a React state change. Currently, the data I'm using to render elements has a start and end array, which are arrays of objects. Inside each object is a unique ID, which I'm passing into the data-flip-id attribute. My goal is that objects in the start array but not in the end array will fade out, and objects in the end array but not in the start array will fade in. The other items will be flipped. From my understanding, Flip should make items that are removed from the state available in the onLeave callback, and items that are added should be available in the onEnter callback. However, that isn't the case. I must be doing something wrong with how I'm either capturing the Flip state or changing the React state, but I can't seem to nail down the issue. Stackblitz example

Thank you for the help, @Rodrigo! I've made some updates to the code animator, which is now on Stackblitz: https://stackblitz.com/~/github.com/hunterbecton/code-slider-demo-2?file=src/themes/CodeSlider.ts I figured out that my elements' position wasn't animating because they were span tags, so I completed that with inline-block. I also added a delay to the fade-in, making it much smoother. However, I'm still trying to understand why removed elements aren't being animated. From my understanding, the onLeave callback should handle this, but I'm obviously missing something here. As a reminder, my goal is for elements that are in the start position but not the end position to be removed first, then added and moved elements to animate next.

Thank you! Would you happen to know why the elements that move in the DOM don't animate position? When I set absolute to true, they move, but the other elements have their positions all out of whack until the animation finishes.

I created a minimal version of my first attempt to animate the code differences. The goal is for elements with a -1 aIndex value to fade in, elements with a -1 bIndex to fade out, and the other elements to move to their new location in the DOM. However, the elements appear when I click the animate button, but nothing animates. What am I missing?

Thanks for pointing me in the right direction. I'll give these a shot and see what I come up with. Thanks!

I'm working on a project called CodeSlider, which is currently live. The app animates the difference between two code editors: removed elements fade away, added elements fade in, and moved or unchanged elements animate positions. I'm currently using Remotion and handing the movement animations with changes to an element's opacity and top and left absolute positioning. Overall, things are working great, but there's a bug that I need help to figure out. The bug occurs when a piece of code is long and needs to wrap to the following line. Everything looks fine in the editor because it's not using absolute positioning, but things get wonky when I try to animate the changes. So, it got me thinking: could GSAP help me solve this issue? For context, my app uses Prism to chunk the code snippets into sections and then figures out the difference between the sections in two sequential slides using a diffing algorithm. Below is a very basic example of what's returned from the diffing algorithm: [ { "content": "const", "aIndex": 0, "bIndex": 0 }, { "content": " test ", "aIndex": 1, "bIndex": -1 }, { "content": " hello ", "aIndex": -1, "bIndex": 1 }, { "content": "=", "aIndex": 2, "bIndex": 2 }, { "content": " ", "aIndex": 3, "bIndex": 3 }, { "content": "\"\"", "aIndex": 4, "bIndex": -1 }, { "content": "\"World\"", "aIndex": -1, "bIndex": 4 } ] The "content" represents the content of the code block, the "aIndex" represents the position of the element at the start, and the "bIndex" represents the position of the element at the end. If the value is "-1" for the "aIndex," that means the value was not present at the start, and if it was "-1" for the "bIndex," that means it was not present at the end. So, with this info, we can decipher the following: what blocks were added, what blocks were moved, and then the remaining blocks (some that don't move and some that do). So, can GSAP handle animating these code blocks without using absolute positioning? Right now, I'm doing a bunch of calculations to figure out where to put items, which is why it gets complicated when lines are much longer, such as importing a long line of CSS for a Google Font. It would be awesome to let GSAP do the heavy lifting for me and not have to worry about all the weird quirks that come with absolute positioning. 😅 Thank you, and I'm looking forward to seeing how GSAP can help!