So I just learned framer motion a few days ago and now I hit my first roadblock. I was just going about animating containers and buttons until I stumbled into the following problem:
I was trying to animate the div container with the following variant:
const containerVariant = {
hover: {
rotateZ: [0, 3, -3, 0],
transition: {
yoyo: Infinity,
}
}
};
As well as a Button with the following variant:
const btnHoverVariant = {
hidden: {
scale: 1,
opacity: 1,
transition: {
type: "tween",
duration: 0.25,
ease: "easeInOut"
}
},
hov: {
scale: 1.1,
opacity: 0.8,
transition: {
type: "tween",
duration: 0.25,
ease: "easeInOut"
}
}
};
My problem is that when I hover on the container it works (the wiggle effect), but when I hover on the button, the button hover effect(the scale effect) it doesn't work.
I did find a workaround for the problem which is to use object syntax for whileHover, transition, and initial props. But for code modularity, I'd like to use variants so if anyone could help me out with my problem, It would be greatly appreciated!
Here is a snippet of the work around:
<motion.button
initial="{{ scale: 1, opacity: 1 }}"
whileHover={{ scale: 1.1, opacity: 0.8 }}
transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
style={btnStyle}
>
Click Me!
</motion.button>
Here is the code sandbox for both the cases that are mentioned above: https://codesandbox.io/s/stoic-diffie-0m2mp?file=/src/test.jsx
Related
I have a logo SVG that I want to come to the center of my page on screen load. I want it to animate and then animate to its spot in the navbar.
Right now because the logo changes size as the screen increases size up to a point using a vw on my x property starts to break down at different screen sizes.
Using 50vw seems to center the SVG from the left side, which does not look good, so the x in VW needs to change as the page size increases.
Is there a way to center this animation on my page like I would in a flex box, so I don't have to make a ton of break points for my animation?
so I need something like this but something that would actually cause the animation to stay centered in the page no matter what size.
const svgVariants = {
hidden: { scale: 0.1, rotate: -360, x: "50vw", y: "100px" },
visible: {
scale: 2,
rotate: 0,
x: "50vw",
y: "100px",
transition: { duration: 2 },
},
exit: {
x: 25,
},
};
const svgVariants2 = {
initial: { scale: 2, translateX: "50vw", y: "100px" },
animate: {
scale: 1,
translateX: "0vw",
y: "0px",
type: "spring",
ease: "easeInOut",
transition: { duration: 2 },
},
};
today I had the same problem and I solved in this method:
const centerScreenAnimationVariant = {
initial:{
x:"50%",
y:"50%"
},
animate:{
x:"0%",
y:"0%",
translateX: "-50%",
translateY: "-50%",
}
}
but you need to add to the motion.img this css:
.center{
display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I have 2 element i wanna animate in react with gsap time line.
The thing is when i wanna chain the time line. its giving me error
Something I want
gsap.to(element1, 1, {...}).to(element2, 1, {...}).to(element2,.5,{...})
But the above code is giving me errors.
So i am writing something like this
gsap.to(appBack.current, 1, {
css: {
backgroundColor: "red",
},
});
gsap.to(overlay.current, 0.3, {
css: {
x: "-100vw",
},
});
gsap.to(overlay.current, 0.3, {
css: {
opacity: 1,
},
});
This is not giving me error anymore but i don't want this kind of behaviour. Since this gsap timelines are happening at the same time
This is an example from the GSAP tutorial where green, orange and grey are classes, you can use also ids like #pink
Check the complete tutorial here https://greensock.com/get-started/
var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
//add 3 tweens that will play in direct succession.
tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});
I want to do this color transition effect but in framer motion way
css example
https://codepen.io/impressivewebs/pen/zqpEg
This is what I attempted, but didn't work
transition:{
delay:2,
backgroundColor: "1.5s ease"
}
my attempt
https://codesandbox.io/s/variants-framer-motion-forked-m3qui
Thank you
according to documentation, the backgroundColor property can be used like this if you are using variants. hope this helps you out ;)
Here is the working codepen:
https://codesandbox.io/s/variants-framer-motion-forked-9y3lo?file=/src/App.js
const variants = {
hidden: {
height: 100,
width: 100
},
visible: {
backgroundColor: ["#60F", "#09F", "#FA0"],
transition: {
delay: 1,
duration: 2,
ease: [0.075, 0.82, 0.165, 1],
repeat: Infinity,
repeatType: "reverse"
}
}
};
So if I know that I can transition an svg path with something like the below:
const pathVariants = {
inital: {
opacity: 0,
pathLength: 0
},
final: {
opacity: 1,
pathLength: 1,
transition: {
duration: 2,
ease: "easeInOut"
}
}
};
//...
<motion.path
variants={pathVariants}
/>
but I can't seem to get the syntax for a motion.line. I tried lineLength instead of pathLength, but that didn't seem to work. Thoughts?
looks like there is a workaround like so:
const lineVariants = {
animate: {
strokeDashoffset: 0,
transition: {
duration: 1
}
},
initial: {
strokeDashoffset: 100
}
};
//...
<motion.line
variants={lineVariants}
animate="animate"
initial="initial"
x1={lineX1}
y1={lineY1}
x2={lineX2}
y2={lineY2}
strokeWidth={stroke}
pathLength="100"
strokeDasharray="100"
/>
I want to fade in div slightly from right and after few seconds fadeout this div
in gsap this code looks like this
tl.fromTo(message,
{duration: 0.5, x: "70", opacity: 0},
{duration: 0.5, x: "0", opacity: 1},
).to(message, {duration: 0.5, delay: 2.5, x: "0", opacity: 0});
how to do it in framer motion?