chenglou / chenglou/react-motion
Question: how to reference the last known y position of an element, to use it for the initial state of an animation?
- Dominant language
- JavaScript
- Stars
- 21.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hi everyone,
Not sure if this is the best place to ask this question - so apologies if not! I'm a designer, so not really used to the whole open-source thing! Anyway, here's my issue:
[Link to Codepen](http://codepen.io/A7DC/pen/pPeoEL?editors=0011).
In my handleScroll function I've got a conditional which checks whether or not the user has scrolled past the bottom of the header (all working fine), and then I'm saving the last known Y position of the list (to use this later as the initial y position for my animation). I'm doing this by setting the state of 'listLastKnownYPosition' from the listY variable as soon as the user has scrolled past the header element, like so:
```js
this.handleScroll = event => {
// Save the element we're wanting to scroll
var el = document.querySelector("header");
var pageY = window.scrollY;
var listY = document.querySelector("header ul").getBoundingClientRect().top;
// If we've scrolled past the height of the element...
if (el.getBoundingClientRect().bottom <= 0) {
console.log(el.getBoundingClientRect().bottom + " bottom " + this.state.headerIsSticky);
this.setState({
headerIsSticky: true,
// Set the state of the lists last known y position
listLastKnownYPosition: listY
});
console.log(this.state.listLastKnownYPosition + " - last known y position");
}
};
};
```
I then have a function which sets the initial styles for the animation called initialScrollStyles, like so:
```js
initialScrollStyles() {
return {
y: spring(-20),
left: "auto",
right: "auto",
top: "auto"
}
}
```
I figured that setting the value within the y property to 'this.state.listLastKnownYPosition' would be what I wanted to do, although this doesn't work. It's only when I set it to something -X that the animation will properly work which isn't ideal because then the list isn't where it should be when the page is initially loaded.
Any ideas to what I need to do to proceed? Maybe I'm not heading in the right direction at all, and there's a better way of trying to do this? Any pointers would be highly appreciated!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked CodePen and inspect handleScroll and initialScrollStyles, focusing on how listLastKnownYPosition is set and read. Reproduce the initial animation behavior and verify the expected relationship between the saved list position and the initial y style.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100