());
104 | const callbacks = useRef<{ [key: string]: () => void }>({});
105 |
106 | const callback = (entries) => {
107 | entries?.forEach((entry) => {
108 | if (entry.isIntersecting) {
109 | setObservable({
110 | obs: entry,
111 | observableList: observablesStore.current,
112 | callbacks: callbacks.current,
113 | });
114 | }
115 | });
116 | };
117 | const observer = useRef(new IntersectionObserver(callback, options));
118 |
119 | const animation = () => {
120 | window.requestAnimationFrame(() => {
121 | colorize({
122 | observableList: observablesStore.current,
123 | initialColor,
124 | fillColor,
125 | hasReverse,
126 | });
127 | });
128 | };
129 |
130 | useEffect(() => {
131 | document.addEventListener("scroll", animation);
132 | return () => {
133 | document.removeEventListener("scroll", animation);
134 | };
135 | }, []);
136 |
137 | const setObserver = (elem: HTMLElement, callbackFn?: () => void) => {
138 | const elemId = elem?.id;
139 |
140 | if (initialColor) {
141 | elem.style.background = initialColor;
142 | }
143 |
144 | observer.current.observe(elem);
145 |
146 | if (elemId && callbackFn) {
147 | callbacks.current[elemId] = callbackFn;
148 | }
149 | };
150 |
151 | return {handleObserve ? handleObserve(setObserver) : null}
;
152 | };
153 |
154 | export default TimelineObserver;
155 |
--------------------------------------------------------------------------------
/test/TimelineAnimation/TimelineAnimation.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 |
3 | import TimelineObserver from "../../src";
4 |
5 | import "./styles.css";
6 |
7 | const Timeline = ({ setObserver, callback }) => {
8 | const [message1, setMessage1] = useState("");
9 | const [message2, setMessage2] = useState("");
10 | const [message3, setMessage3] = useState("");
11 |
12 | const timeline1 = useRef(null);
13 | const timeline2 = useRef(null);
14 | const timeline3 = useRef(null);
15 | const circle1 = useRef(null);
16 | const circle2 = useRef(null);
17 | const circle3 = useRef(null);
18 |
19 | const someCallback = () => {
20 | setMessage1("Step one");
21 | callback();
22 | };
23 |
24 | const someCallback2 = () => {
25 | setMessage2("Step two");
26 | };
27 |
28 | const someCallback3 = () => {
29 | setMessage3("Finish");
30 | };
31 |
32 | useEffect(() => {
33 | setObserver(timeline1.current);
34 | setObserver(timeline2.current);
35 | setObserver(timeline3.current);
36 | setObserver(circle1.current, someCallback);
37 | setObserver(circle2.current, someCallback2);
38 | setObserver(circle3.current, someCallback3);
39 | }, []);
40 |
41 | return (
42 |
43 |
44 |
45 |
46 | 1
47 |
48 |
{message1}
49 |
50 |
51 |
52 |
53 | 2
54 |
55 |
{message2}
56 |
57 |
58 |
59 |
60 | 3
61 |
62 |
{message3}
63 |
64 |
78 |
react-scroll-animation component
79 |
⬇️ scroll to start ⬇️
80 |
(
85 |
90 | )}
91 | />
92 | {message}
93 | 
8 |