menu

Framer

The best prototyping tool for teams. Join our Discord chat for weekly classes and real-time help with Framer. http://framer.com/r/discord?utm=spectrum

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Bug Reports
view-forward
# FAQ
view-forward
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
Team

[framer-motion] Morphing SVG path's d attribute

September 19, 2019 at 2:25pm

[framer-motion] Morphing SVG path's d attribute

September 19, 2019 at 2:25pm (Edited 11 months ago)
I have noticed that framer-motion supports morphing SVG path's as seen in this sandbox. This is great and what I want to do.
My next step would be to animate between the two path states on scroll. I cannot get this working and I was wondering if you could help me figure it out.
I have tried to use useViewportScroll in combination with useTransform and then use the style attribute to update the component. But it doesn't work.
const inputRange = [0, 100]
const outputRange = [
`M 100 300
A 100 100 0 0 1 300 200
L 250 250
A 50 50 0 0 0 150 300
L 100 300 Z`,
`M 100 300
A 100 100 0 0 1 300 300
L 250 300
A 50 50 0 0 0 150 300
L 100 300 Z`,
]
const { scrollYProgress } = useViewportScroll()
const value = useTransform(scrollYProgress, x =>
transform(x, inputRange, outputRange),
)
// ...
<motion.path
initial={{
d: transform(0, inputRange, outputRange)
}}
style={{
d: value
}}
transition={{
type: "spring",
damping: 50,
stiffness: 200
}}
/>
</svg>
What am I not understanding?

July 6, 2020 at 1:08am
Did you ever figure this out?
  • reply
  • like

July 6, 2020 at 9:11am
I ended up starting the animation on scroll. Which had the effect I was after.
  • reply
  • like