Savitha Gollamudi
50 lines
1.0 KiB
JavaScript
50 lines
1.0 KiB
JavaScript
import React, { useRef, useEffect } from "react"
|
|
import gsap from "gsap"
|
|
const Loader = () => {
|
|
let arrow = useRef([])
|
|
useEffect(() => {
|
|
var tl = new gsap.timeline({ repeat: -1 })
|
|
tl.fromTo(
|
|
arrow.current,
|
|
{
|
|
y: 0,
|
|
color: "#3b3b4f",
|
|
},
|
|
{
|
|
y: -50,
|
|
color: "#d0d0d5",
|
|
stagger: 0.1,
|
|
duration: 0.5,
|
|
ease: "Linear.easeNone",
|
|
}
|
|
)
|
|
tl.add("cp")
|
|
tl.fromTo(
|
|
arrow.current,
|
|
{
|
|
y: -50,
|
|
color: "#d0d0d5",
|
|
},
|
|
{
|
|
y: 0,
|
|
color: "#3b3b4f",
|
|
stagger: 0.1,
|
|
duration: 0.5,
|
|
ease: "Linear.easeNone",
|
|
},
|
|
"cp-=0.3"
|
|
)
|
|
})
|
|
return (
|
|
<div className="loader">
|
|
<span ref={el => (arrow.current[0] = el)}>↓</span>
|
|
<span ref={el => (arrow.current[1] = el)}>↓</span>
|
|
<span ref={el => (arrow.current[2] = el)}>↓</span>
|
|
<span ref={el => (arrow.current[3] = el)}>↓</span>
|
|
<span ref={el => (arrow.current[4] = el)}>↓</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Loader
|