Animations with position:sticky / scroll position update

Hi,

i’m currently trying to add sticky headers to a large list of elements. Due to position: sticky the animations get broken / look weird. Is there a workaround to handle these kinds of elements? Maybe by setting the position temporarily to relative during the animation phase?

And another question regarding the scroll position: I use react-flip-move to sort “favorite” items to the top of a list. Sometimes (but only sometimes) the scroll position is updated accordingly and “follow” the clicked item. Is there an option / fix to ensure that the scroll position is always updated or do i have to manage it outside of the library? I’m willing to add it by myself if it makes sense 😄

Thanks in advance and for this nice library 👍

[agido-freudenreich]

Hi @joshwcomeau,

quick update, also for people who have the same issue: I’ve managed it with a little (hack) function to calculate the “real” top position and set it as getPosition prop.

getPosition = node =>{
    const position = window.getComputedStyle(node).position;
    node.style.position = 'relative';
    const boundingClientRect = node.getBoundingClientRect();
    node.style.position = position;
    return boundingClientRect;
}

[agido-freudenreich]

Hi @joshwcomeau,

sorry for my late answer. Thanks for your help and the explanation. We’ll try to either manage it by manually stickyness or leave it out. You/PM can’t have everything 😉