'React framer-motion objects increasing in size when dragging
So as the question says my objects are increasing in size when I drag then and I'm really not sure why, here is the code can anyone see what I'm doing wrong? Its a bunch of circle images which just move around a bit on the screen and grow slightly smaller on click but only while they are being dragged.
React Page
import React from 'react';
import { useMediaQuery} from 'react-responsive';
import { motion } from 'framer-motion';
import { Button } from '../../globalStyles';
import CodeCircle1 from '../../images/CodeCircle1.png';
import CodeCircle2 from '../../images/CodeCircle2.png';
import CodeCircle3 from '../../images/CodeCircle3.png';
import CodeCircle4 from '../../images/CodeCircle4.png';
import { Section, Container, ColumnLeft, ColumnRight, Image, } from './AboutPage.elements';
const AboutPage = () => {
const fadeLeft = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0 }
};
const Desktop = ({ children }) => {
const isDesktop = useMediaQuery({ minWidth: 768 })
return isDesktop ? children : null
}
const Mobile = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 767 })
return isMobile ? children : null
}
return (
<Section>
<Container>
<ColumnLeft>
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Josh Lawler
</motion.h1>
<motion.p
variants={fadeLeft}
initial='hidden'
animate='visible'
transition={{ duration: 1 }}
>
I'm a UK computer science graduate who is profficent in languages such as Python, Javascript and Java.
</motion.p>
<Button
whileHover={{ scale: 1.05 }}
whileTap={{
scale: 0.95,
backgroundColor: '#67F6E7',
border: 'none',
color: '#000'
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 1.5 } }}
>
Get Started
</Button>
</ColumnLeft>
<Desktop>
<ColumnRight>
<Image
src={CodeCircle1}
alt='CodeCircle'
whileTap={{ scale: 0.9 }}
drag={true}
dragConstraints={{ left: 0, right: 250, top: 0, bottom: 50 }}
initial={{ opacity: 0, y: -100 }}
animate={{ opacity: 1, y: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle2}
alt='CodeCircle'
whileTap={{ scale: 0.6 }}
drag={true}
dragConstraints={{ left: 50, right: 0, top: 0, bottom: 50 }}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle3}
alt='CodeCircle'
whileTap={{ scale: 0.8 }}
drag={true}
dragConstraints={{ left: 0, right: 250, top: 0, bottom: 50 }}
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle4}
alt='CodeCircle'
whileTap={{ scale: 0.9 }}
drag={true}
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0, transition: { duration: 1 } }}
/>
</ColumnRight>
</Desktop>
<Mobile>
<ColumnRight>
<Image
src={CodeCircle1}
alt='CodeCircle'
whileTap={{ scale: 0.9 }}
drag={true}
dragConstraints={{ left: 0, right: 50, top: 0, bottom: 50 }}
initial={{ opacity: 0, y: -100 }}
animate={{ opacity: 1, y: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle2}
alt='CodeCircle'
whileTap={{ scale: 0.6 }}
drag={true}
dragConstraints={{ left: 25, right: 0, top: 0, bottom: 25 }}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle3}
alt='CodeCircle'
whileTap={{ scale: 0.8 }}
drag={true}
dragConstraints={{ left: 0, right: 25, top: 0, bottom: 10 }}
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0, transition: { duration: 1 } }}
/>
<Image
src={CodeCircle4}
alt='CodeCircle'
whileTap={{ scale: 0.9 }}
drag={true}
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0, transition: { duration: 1 } }}
/>
</ColumnRight>
</Mobile>
</Container>
</Section>
)
}
Styling Page
export default AboutPage;
import styled from 'styled-components';
import { motion } from 'framer-motion';
export const Section = styled.section`
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #101522;
`;
export const Container = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
padding: 3rem calc((100vw - 1300px) / 2);
@media screen and (max-width: 768px) {
grid-grid-template-columns: 1fr;
}
`;
export const ColumnLeft = styled.div`
display: flex;
color: #fff;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 5rem 2rem;
h1 {
font-size: 48px;
}
p {
margin: 2rem 0;
font-size: 18px;
line-height: 1.1;
}
`;
export const Image = styled(motion.img)`
position: absolute;
width: 100%;
height: 100%;
max-width: 250px;
max-height: 250px;
`;
export const ColumnRight = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
${Image}:nth-child(1) {
top: 10px;
left: 10px;
}
${Image}:nth-child(2) {
top: 170px;
right: 10px;
}
${Image}:nth-child(3) {
top: 350px;
left: 100px;
}
${Image}:nth-child(4) {
bottom: 100px;
right: 75px;
}
@media screen and (max-width: 768px) {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
${Image}:nth-child(1) {
top: 10px;
left: -20px;
}
${Image}:nth-child(2) {
top: 170px;
right: 50px;
}
${Image}:nth-child(3) {
top: 350px;
left: -10px;
}
${Image}:nth-child(4) {
bottom: 100px;
right: 25px;
}
}
`;
Solution 1:[1]
You have a whileTap property set on every image. This means that when the image is tapped (and then dragged), the set of transformation defined in whileTap are applied.
In your case
whileTap={{ scale: 0.95 }}
Means that meanwhile the mouse (or finger) is pressed on an element, the element itself is scaled at 95% of its size, hence it will become smaller.
Simply remove the scale property from whileTap to prevent that effect.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Luca De Nardi |