Skip to content

Commit

Permalink
feat: motion container target offset
Browse files Browse the repository at this point in the history
  • Loading branch information
@wkylin
wkylin committed Dec 25, 2024
1 parent b0f9b21 commit 9cfad3c
Showing 1 changed file with 0 additions and 210 deletions.
210 changes: 0 additions & 210 deletions src/pages/motion/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,6 @@ const ParallaxVert = () => {
return (value * 1) / 5
})

const ref = useRef(null)
const { scrollYProgress: scrollAa } = useScroll({
container: scrollRef,
target: ref,
offset: ['end end', 'start start'],
})

const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
Expand Down Expand Up @@ -749,211 +742,8 @@ const ParallaxVert = () => {
</LayoutGroup>
</motion.div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: 100,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: 22,
fontFamily: 'system-ui',
color: '#333',
letterSpacing: 2,
}}
>
<motion.div
layout
style={{
width: leftState ? 200 : 100,
height: leftState ? 200 : 100,
backgroundColor: '#999',
borderRadius: '60px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 10,
}}
onTap={() => {
setLeftState(!leftState)
}}
>
<motion.div
layout
style={{
width: 30,
height: 30,
backgroundColor: 'black',
borderRadius: 60,
}}
></motion.div>
</motion.div>
<motion.span layout>黑点和文字都设置了layout</motion.span>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: 22,
fontFamily: 'system-ui',
color: '#333',
}}
>
<motion.div
layout
style={{
width: leftState ? 200 : 100,
height: leftState ? 200 : 100,
backgroundColor: '#999',
borderRadius: '60px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 10,
}}
onTap={() => {
setLeftState(!leftState)
}}
>
<motion.div
style={{
width: 30,
height: 30,
backgroundColor: 'black',
borderRadius: 60,
}}
></motion.div>
</motion.div>
<motion.span>黑点和文字都未设置layout</motion.span>
</div>
</div>
<section>
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollAa }}
/>
</svg>
</figure>
</div>
</section>
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollAa }}
/>
</svg>
</figure>
</div>
</section>
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollAa }}
/>
</svg>
</figure>
</div>
</section>
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollAa }}
/>
</svg>
</figure>
</div>
</section>
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollAa }}
/>
</svg>
</figure>
</div>
</section>
</section>
</FixTabPanel>
)
}

export default ParallaxVert

function Item({ scrollRef }) {
const ref = useRef(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ['end end', 'start start'],
container: scrollRef,
})

return (
<section>
<div ref={ref} className="item">
<figure className="progress">
<svg id="progress" width="75" height="75" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
<motion.circle
cx="50"
cy="50"
r="30"
pathLength="1"
className="indicator"
style={{ pathLength: scrollYProgress }}
/>
</svg>
</figure>
</div>
</section>
)
}

0 comments on commit 9cfad3c

Please sign in to comment.