Today's going to be a another simple day. I'm going to explain how I did another one of the subtle animations I added.
Each of the "blocks" for my project is a link that sends users to the project repo. When you hover over the link the image zooms in a bit. It's hard to tell without a video, but I'll show the hovered and unhovered states below.
This is the unhovered state of the link.
And this is the hovered state.
I used react spring to add this subtle animation and I'll talk a bit about the code. Since I used a component to create each of the project pages I had to get a bit creative.
const [{ size0, size1, size2, size3 }, set] = useSpring(() => ({
size0: "110",
size1: "100",
size2: "100",
size3: "100",
}))
This is the setup that I have for each of the images. Since I have 4 images I have 4 size variables. I will mention that the first variable is 110 because that specific image doesn't fit into the div so I had to make it a little bit larger.
onMouseEnter={
index === 0
? () => set({ size0: "120" })
: index === 1
? () => set({ size1: "110" })
: index === 2
? () => set({ size2: "110" })
: () => set({ size3: "110" })
}
onMouseLeave={
index === 0
? () => set({ size0: "110" })
: index === 1
? () => set({ size1: "100" })
: index === 2
? () => set({ size2: "100" })
: () => set({ size3: "100" })
}
This allows me to change the size of each of the pictures as I hover over them and also allows me to return them to their original value. I'd prefer to not use a ternary statement but because this is a component when I hover over 1 image, all 4 of the images zoom in. That's why I had to come up with this alternate solution (Unless I'm missing something important.)
Well that's going to be all from me today. Thanks for reading!