Animation delayed because of scroll bounce when scroll reaches end

0
Asked by : jeanne nelson 2020-04-05 03:34

I am hiding a navbar-like header on scroll. Which is working okay except for one detail. The animation get's delayed when scroll reaches to the top (which is when the header should be animated into vision again), because when it reaches the top it does that "bounce"-animation. THEN my animation triggers, which is something like 500ms to late.

The problem is that I can't figure out how to trigger it instantly when the scroll reaches the top.

I have been trying all different kind of props to ScrollView, I have tried using states to detect when the position is right for a trigger. I have tried all different conditionals I could imagine.

All my solutions has ended up with the animation being triggered when the scroll reaches the top AND the bounce animation has ended, I want it to trigger the same moment the scrollposition has reached 0.

This is how the code looks right now:

         let viewPosition = 0;
        const scrollToHide = (event) => {
        const currentPosition = event.nativeEvent.contentOffset.y;
        const direction =
            currentPosition > 0 && currentPosition > viewPosition
                ? "down"
                : "up";
        const isDescending = direction === "down";
        if (isDescending !== isHidden) {
            LayoutAnimation.configureNext("my animation here");
            setIsHidden(!isHidden);
        }
        // To not trigger animation when scroll goes beyond top end. (the bouncing I'm talking about)
        if (currentPosition < 0) {
            setIsHidden(false);
        }
        // To not trigger animation if the scroll position is not near the top
        if (currentPosition > 10) {
            setIsHidden(true);
        }
        viewPosition = currentPosition;
    };



<ScrollView onScroll={scrollToHide} />

0 Answers

0 votes
Related Posts
Related Posts
1
Move multi-select list with JavaScript...
noélie roux noélie roux
2020-03-20  11:41pm 2020-03-20 11:41pm
2
Reset form method not working in timepic...
joan vega joan vega
2021-01-05  5:36am 2021-01-05 5:36am
3
Using JS, how to implement an e-commerce...
marcus andersen marcus andersen
2021-09-27  8:22am 2021-09-27 8:22am
4
How to wait for cypress command to finis...
sara johansen sara johansen
2020-07-06  5:40pm 2020-07-06 5:40pm
5
Environmental variable undefined in Reac...
eduardo van de woestijne eduardo van de woestijne
2020-04-25  6:58am 2020-04-25 6:58am