-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tracked Position on Page load #26
Comments
Try adding the |
So, it should look like this? <TrackDocument updateOnDidMount formulas={[getDocumentElement, ... |
yes |
I don't see any difference. Is there anything else I need to import? |
Nah that's it... I'm not sure to what extend the problem you're experiencing is specific to |
On page load: scrollY = 0; posTopBottom = -677; posBottomTop = 0; |
I set a breakpoint in the demo page and noticed the same behavior happening there. I wonder if you can somehow structure your page in a similar way so that the initial calculation doesn't mess anything up? Another thing to try is to use |
Unfortunately, I cannot hide the content until the scroll fires. One thing to note, I am actually mapping an array of content through another render function:
I am passing the formulas I need to this function, which has the subsequent elements. I'm not sure if this has any bearing on the load order or how the positioning is calculated. Have you come across any simple/effective ways to fire off the scroll once the content is in place? I've tried TweenMax from a position, adding scrollBy functions and a few more things, but nothing has produced an effective result. Thanks again for responding. |
What you can do is modify the source here so that instead of doing
we do
then you can grab the ref of
Finally, you can trigger an update whenever you want by doing
Try it out on your project and if it works, feel free to create a PR to add this feature. |
Awesome. I will check this out and get back to you. Thanks.
… On Mar 20, 2017, at 6:27 PM, Gil Birman ***@***.***> wrote:
What you can do is modify the source here so that instead of doing
const update = ....
we do
this.update = ...
then you can grab the ref of <TrackDocument
<TrackDocument ref={r => this.trackDocument = r}
Finally, you can trigger an update whenever you want by doing
this.trackDocument.update()
Try it out on your project and if it works, feel free to create a PR to add this feature.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
This gets me much closer, but the calculation isn't perfect and unfortunately there is still a noticeable jump. I'm thinking that it has something to do with mapping through an array and calling another function to render the elements I'm having issues with (full code below). When I put the So, the issue appears to be a combination of using your update suggestion and something else, which may or may not have something to do with calling another render function from within the original
|
I wanted to follow up with you. I have found a solve after writing a custom fix, but after going through this process I believe a piece of what I did is what our missing element was. Exposing that update function does work, but calling it onMount was not enough. Apparently, the timing of the onMount call doesn't give all the rendered elements enough time to actually "mount". Even with my custom solve I need to tell the page to update using a setTimeout. The timeout was only 50ms, but that was enough for the page to render using the correct scroll calculation. In order to keep the viewer from seeing the position of the track elements jump on this update call, I simply hid them until it happened, by setting the state of another variable
Note: the single quotes directly inside the outer-most curly brackets should be backticks. The formatting on git-hub keeps them from rendering properly. Hopefully, this fix works for anyone who has a similar issue. Thanks for your input and feedback. |
A few of the items I am tracking appear slightly above the bottom of the page on load. These items are appearing with a translate3d y-position of -33% (see code below). Once I scroll they jump to the calculated position based on my tween. Is there any way to have the tween calculate and apply while their position on load (without seeing a jump)?
I have already tried applying a scroll using js, but you can still see they items jump once the calculated tween takes hold. Thanks!
The text was updated successfully, but these errors were encountered: