When scrollTop is equal to 500px, I want to trigger an animation on a div with position fixed. Is there a way to do this in framer-motion. I only find solution that propose when element is in viewport. But my div is always in the viewport, because it has a fixed position. I need a build in scroll position watcher.
sandbox
import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";
this is kind of old already but here is the answer.
import { useViewportScroll } from "framer-motion";
const Nav = () => {
const { scrollY } = useViewportScroll();
scrolly.onChange(y => {
// y = scroll position
//Do Something
})
}
const { scrollY } = useViewportScroll();
scrollY.onChange(y => {
console.log('y ', y)
})
just a slight typo :)
Related
I am new to React dev so this may be something simple I am missing with hooks.
Using a template, I have used a header bar which shrinks in height if you scroll down in the page far enough (i.e it is only at max height if you scroll to the top).
I have been customising a sidebar to go along with the headerbar, and I'm trying to get the items within it to also move up when the bottom of the headerbar moves up.
The app bar uses a pre-made function:
import { useState, useEffect } from 'react';
// ----------------------------------------------------------------------
export default function useOffSetTop(top: number) {
const [offsetTop, setOffSetTop] = useState(false);
const isTop = top || 100;
useEffect(() => {
window.onscroll = () => {
if (window.pageYOffset > isTop) {
setOffSetTop(true);
} else {
setOffSetTop(false);
}
};
return () => {
window.onscroll = null;
};
}, [isTop]);
return offsetTop;
}
Then you can just import it, assign a constant bool to useOffSetTop(HEADER.DASHBOARD_DESKTOP_HEIGHT) and base the layout on the state of that const.
In the app bar it controls the height, so in the nav bar I made it control he height of an empty .
It does work, but the app bar stops working.
I do have hot-reload on and if I make a change to the app bar it starts working but the nav bar stops working.
I guess it is just because whichever loads last is the one which binds something to window.onscroll and the other is wiped.
I am just wondering how I could change this function or restructure the code so that this could be imported by multiple components on the same page - possibly without having to just import it higher up and pass the true/false value down through the components?
The issue is that you are actually "overriding" the onScroll function (or replacing it) instead of listening for the event.
by doing this
window.onScroll = null;
you are effectively overriding the onScroll function to do nothing.
Best to listen for the onscroll event.
import { useState, useEffect } from 'react';
export default function useOffSetTop(top: number) {
const [offsetTop, setOffSetTop] = useState(false);
const isTop = top || 100;
const handleOnScroll = () => {
if (window.pageYOffset > isTop) {
setOffSetTop(true);
} else {
setOffSetTop(false);
}
}
useEffect(() => {
window.addEventListener('scroll', handleOnScroll )
return () => {
window.removeEventListener('scroll', handleOnScroll)
};
}, [isTop, handleOnScroll]);
return offsetTop;
}
I'm facing an issue in which I need to change header text position from left to centre when user begin scroll and back to left if user scroll to top. But I unable to find solution for. I'm using scrollview which have a lot of content inside it. Can anyone tell me how to do that?
You can find a solution here :
Click here
<ScrollView
onScroll={({nativeEvent})=>{
if(isCloseToTop(nativeEvent)){
//do something
}
if(isCloseToBottom(nativeEvent)){
//do something
}
}}
>
...contents
</ScrollView>
isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
}
ifCloseToTop({layoutMeasurement, contentOffset, contentSize}){
return contentOffset.y == 0;
}
Try this way
import React, { useState, useEffect } from "react";
function Example() {
const [scrollPosition, setScrollPosition] = useState(-1);
useEffect(() => {
// console.log("scrollPosition: ", scrollPosition);
if (scrollPosition === 0) {
// condition is true when scroll on top
}
}, [scrollPosition]);
const getscrollposition = (e) => {
const y = e.nativeEvent.contentOffset.y;
setScrollPosition(y);
};
return (
<ScrollView
onMomentumScrollEnd={getscrollposition}
scrollEventThrottle={16}
>
.....
</ScrollView>
);
}
I am using ResponsiveGridLayout, React-Grid-Layout in my application, and I am using echarts as grid items.
The drag and drop works fine, but when i resize the grid item, the chart did not resize together with it. I have tried implementing the onLayoutchange properties, but it is not working.
can someone can help me out here
this is my codesandbox that reproduce the issue
I was able to achieve this, at least when modifying grid items width (not height yet...), by using this hook, then in your chart component :
[...]
const chartRef = useRef<HTMLDivElement>();
const size = useComponentSize(chartRef);
useEffect(() => {
const chart = chartRef.current && echarts.getInstanceByDom(chartRef.current);
if (chart) {
chart.resize();
}
}, [size]);
[...]
return <div ref={chartRef}></div>;
...so your chart will resize when the grid item is resized. I'm not sure about that, still a WIP for me but it works.
Extract this as a custom hook
You can create useEchartResizer.ts, based on #rehooks/component-size :
import useComponentSize from '#rehooks/component-size';
import * as echarts from 'echarts';
import React, { useEffect } from 'react';
export const useEchartResizer = (chartRef: React.MutableRefObject<HTMLDivElement>) => {
const size = useComponentSize(chartRef);
useEffect(() => {
const chart = chartRef.current && echarts.getInstanceByDom(chartRef.current);
if (chart) {
chart.resize();
}
}, [chartRef, size]);
};
Then use it in the component which holds the chart :
export const ComponentWithChart = (props): React.ReactElement => {
const chartRef = useRef<HTMLDivElement>();
useEchartResizer(chartRef);
useEffect(() => {
const chart = echarts.init(chartRef.current, null);
// do not set chart height in options
// but you need to ensure that the containing div is not "flat" (height = 0)
chart.setOption({...} as EChartsOption);
});
return (<div ref={chartRef}></div>);
});
So each time the div is resized, useEchartResizer will trigger a chart.resize(). Works well with react-grid-layout.
I'm using a modal within a view - which contains a form. The form is longer than the viewport - so, the content is taking up the height of the page and scrolling out of view.
Can anyone advise on the best approach for dynamic height?
currently i'm using the following approach, but doesnt work if phone orientation switched and i'm sure there must be a better solution?
heightScreen = () => {
return Dimensions.get('window').height - 150;
}
<Modal
isVisible={this.props.showModal}
animationInTiming={500}
backdropColor={'#f79431'}
style={{ marginVertical:50, maxHeight: this.heightScreen()}}
>
import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';
export const useOrientation = () => {
const [orientation, setOrientation] = useState("PORTRAIT");
useEffect(() => {
Dimensions.addEventListener('change', ({ window:{ width, height } }) => {
setOrientation(width < height ? "PORTRAIT" : "LANDSCAPE")
})
}, []);
return orientation;
}
You can add this function as a helper to detect the orientation (portrait/landscape) and based on that to apply the correct height.
I have an component on my page that scrolls, but the rest doesn't. I want to scroll to a certain Y location within this element, when I change a useState value using a different component.
const scrollMe = useRef();
useEffect(
() => {
if (scrollMe === true) {
scrollPanel.scrollTo(0, 300)
}
},
[ scrollMe ]
);
The scrollable component is like so:
<div ref={scrollMe} onScroll={(e) => handleScroll(e)}>A mapped array</div>
The scroll function is as follows:
const handleScroll = (e) => {
if (e.target.scrollTop !== 0) {
setTopBarPosition(true);
} else {
setTopBarPosition(false);
}
};
Setting the topBarPosition affects
<div className={`topBar ${topBarPosition === true ? 'topBarToTop' : ''}`}>
<TopBar/>
</div>
And the css class topBarToTop moves the topBar to the top of the page:
.topBarToTop {
top: 30px;
}
How come I just get scrollMe.scrollTo is not a function ?
I made a codesandbox that illustrates what I'm trying to do:
https://codesandbox.io/s/react-hooks-counter-demo-izho9
You need to make some small changes, Please follow the code comments:
useEffect(() => {
// swap the conditions to check for childRef first
if (childRef && topPosition) {
// use to get the size (width, height) of an element and its position
// (x, y, top, left, right, bottom) relative to the viewport.
const { y } = childRef.current.getBoundingClientRect()
// You have to call `current` from the Ref
// Add the `scrollTo()` second parameter (which is left)
childRef.current.scrollTo(y, 0)
// Initially it was set to `false` and we change it to `true` when click on scroll
// button then we change it back to `false` when re-render
setTopPosition(false)
}
}, [topPosition, childRef])
More about getBoundingClientRect()