| 10 | const INITIAL_WIDTH = 20 |
| 11 | |
| 12 | export default function App() { |
| 13 | const containerRef = React.useRef<HTMLDivElement>(null!) |
| 14 | const barContainerRef = React.useRef<HTMLDivElement>(null!) |
| 15 | |
| 16 | const [textStyles, textApi] = useSpring(() => ({ |
| 17 | y: '100%', |
| 18 | })) |
| 19 | |
| 20 | const { scrollYProgress } = useScroll({ |
| 21 | container: containerRef, |
| 22 | onChange: ({ value: { scrollYProgress } }) => { |
| 23 | if (scrollYProgress > 0.7) { |
| 24 | textApi.start({ y: '0' }) |
| 25 | } else { |
| 26 | textApi.start({ y: '100%' }) |
| 27 | } |
| 28 | }, |
| 29 | default: { |
| 30 | immediate: true, |
| 31 | }, |
| 32 | }) |
| 33 | |
| 34 | return ( |
| 35 | <div ref={containerRef} className={styles.body}> |
| 36 | <div className={styles.animated__layers}> |
| 37 | <animated.div ref={barContainerRef} className={styles.bar__container}> |
| 38 | {Array.from({ length: X_LINES }).map((_, i) => ( |
| 39 | <animated.div |
| 40 | key={i} |
| 41 | className={styles.bar} |
| 42 | style={{ |
| 43 | width: scrollYProgress.to(scrollP => { |
| 44 | const percentilePosition = (i + 1) / X_LINES |
| 45 | |
| 46 | return ( |
| 47 | INITIAL_WIDTH / 4 + |
| 48 | 40 * |
| 49 | Math.cos( |
| 50 | ((percentilePosition - scrollP) * Math.PI) / 1.5 |
| 51 | ) ** |
| 52 | 32 |
| 53 | ) |
| 54 | }), |
| 55 | }} |
| 56 | /> |
| 57 | ))} |
| 58 | </animated.div> |
| 59 | <animated.div className={styles.bar__container__inverted}> |
| 60 | {Array.from({ length: X_LINES }).map((_, i) => ( |
| 61 | <animated.div |
| 62 | key={i} |
| 63 | className={styles.bar} |
| 64 | style={{ |
| 65 | width: scrollYProgress.to(scrollP => { |
| 66 | const percentilePosition = 1 - (i + 1) / X_LINES |
| 67 | |
| 68 | return ( |
| 69 | INITIAL_WIDTH / 4 + |