I have a very weird issue. I am doing a basic animation like (with framer-motion 5.5.5 and tailwindcss 2.2.16):
<motion.div
className="w-2/3 h-96 bg-red-500 absolute left-10 top-10"
initial={{ x: 2700 }}
animate={{ x: 0 }}
transition={{
type: "spring",
stiffness: 80,
delay: 0.6,
damping: 15,
}}
></motion.div>
The problem with this animation is that on Edge it lags/freezes a tiny amount in the ending. On any other browser like Chrome and Firefox, the animation is very smooth. The weird part is that if I am using the Edge Incognito mode (InPrivate) the animation is smooth without any lag or freeze.
I have to specify that I am returning the above element in index.js so nothing else it's interfering.
My node version is v16.13.1 and my npm version is 8.1.2.
Related
If I manually set scale and opacity in my css, the animation is working.
It's why I think that my initial value don't work, and it's really weird because in another file i'm not facing this issue with the same code.
<motion.a
href="#"
className="file"
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ delay: 3, duration: 3 }}
variants={{
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0 },
}}
>
© Sb_2K22<span className="end">.txt</span>
</motion.a>
Also the delay and duration are not working too...
Tell me if you need more information please
I'm trying to animate an image using framer motion in react
<div className={classes.imgContainer}>
<img src={gradient} id={classes["gradient"]} alt="gradient" />
<motion.img
id={classes["floater"]}
initial={{ y: -10 }}
animate={{ y: 10 }}
transition={{
type: "smooth",
repeatType: "mirror",
duration: 2,
repeat: Infinity,
}}
src={floaterImg}
alt="floater"
/>
</div>
But the code above throws TypeError: "Cannot read properties of undefined (reading 'needsInterpolation')"
Had the same issue after upgrading to next 13. Fixed it by upgrading to the latest version of framer-motion.
I am trying to loop over some data and map them to an animated SVG morph but every component instance has different paths.
Framer motion seems to animate them exactly the same even though there paths are different. Any idea how do I make the animations between elements different instead of all of them matching?
Here's a codesandbox describing the issue. Notice that the repeated Dog blob is running through the exact paths animations, even though paths passed to <animated.path
Inside the Blob component for the motion.path element, perhaps the d: paths should be d: gallery.paths?
Otherwise it seems that the paths to be animated for both Blob would be the original const paths without randomized by randomItem.multiple(), hence the exactly same morphing animations.
Update
For the second issue, it seems that both clipPath share the same id, which is a global value, unlike the scoped key. This resulted in just the first clip path was used, and is solved by giving each of them unique id.
With this fix I can see 2 different morphing animations on my end now, so hopefully this solved all the problems.
<g>
<defs>
<clipPath id={`shape-${gallery.key}`}>
<LayoutGroup id={gallery.key}>
<motion.path
layoutId={gallery.key}
style={{
fill: "#9565c8",
transform: "translate(200px, 200px)",
}}
animate={{
d: gallery.paths,
repeatCount: Infinity,
autoReverse: true,
}}
transition={{
repeat: Infinity,
ease: "easeInOut",
duration: gallery.paths.length,
reverse: true,
repeatType: "reverse",
bounce: true,
bounceStiffness: 10,
}}
/>
</LayoutGroup>
</clipPath>
</defs>
<image
style={{ position: "absolute", top: 100, left: 100 }}
clipPath={`url(#shape-${gallery.key})`}
xlinkHref={gallery.image}
/>
</g>
I have a React / Tailwind component with a full screen element. On desktop it works as intended however on mobile the address bars of either chrome of safari cause part of the element to be shown underneath it. Giving the impression that the element isn't correctly centered.
I have researched this issue for a while now and have found no solid answer on how to fix it in React.
I have tried various combinations of height: --webkit-fill-available height: 100vh height: 100% ,with min-height also, on HTML, Root, Body in my main CSS file. Additionally I have tried several different JS functions that calculate the inner height of the document (the height of the document with the address bar excluded.) As well as not using height: 100vh on my targeted element and instead using a combination of height: 100% and fixed positioning. None of these methods have worked in any way at all.
Im hoping for a more React oriented fix to this issue instead of a plain HTML method.
Please note: motion. to anyone unfamiliar is part of Framer Motion and has no effect on the targeted element outside of using Framer properties.
Heres the component:
import * as React from 'react';
import { useEffect } from 'react';
import { motion } from 'framer-motion';
export default function LoadingScreen() {
useEffect(() => {
window.scrollTo(0, 0)
}, [])
return(
<motion.div
className="fixed z-50 w-full bg-tertiary"
initial= {{ opacity: 1 }}
animate={{ opacity: 0 }}
transition={{ duration: 0.3, delay: 2.5, ease: 'easeInOut' }}
>
{/* Image container */}
<motion.div
className="flex justify-center items-center"
initial= {{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, ease: 'easeInOut' }}
>
<motion.img
src="../Images/icon.png"
className="h-[80px] absolute left-0 right-0 top-[50%] -translate-y-[50%] px-5 mx-auto"
initial= {{ opacity: 1 }}
animate={{ opacity: 0 }}
transition={{ duration: 1, delay: 1, ease: 'easeInOut' }}
></motion.img>
<motion.img
src="../Images/icon-primary.png"
className="h-[80px] absolute left-0 right-0 top-[50%] -translate-y-[50%] px-5 mx-auto"
initial= {{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5, ease: 'easeInOut' }}
></motion.img>
</motion.div>
</motion.div>
)
};
Not sure what kind of the result you're looking for?
If you want to make it center both horizontally and vertically, you need to add the device height in the outer layer so it has the space to center.
<motion.div
className="bg-tertiary fixed z-50 h-screen w-full"
initial={{ opacity: 1 }}
animate={{ opacity: 0 }}
transition={{ duration: 0.3, delay: 2.5, ease: "easeInOut" }}
>
{/* Image container */}
<motion.div
className="flex items-center justify-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, ease: "easeInOut" }}
>
<motion.img
src="../Images/icon.png"
className="absolute left-0 right-0 top-[50%] mx-auto h-[80px] -translate-y-[50%] px-5"
initial={{ opacity: 1 }}
animate={{ opacity: 0 }}
transition={{ duration: 1, delay: 1, ease: "easeInOut" }}
></motion.img>
<motion.img
src="../Images/icon.png"
className="absolute left-0 right-0 top-[50%] mx-auto h-[80px] -translate-y-[50%] px-5"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5, ease: "easeInOut" }}
></motion.img>
</motion.div>
</motion.div>
Here is the website link and as you can see, the intro animations look too laggy. Here is the code:
<motion.div className='pic' initial={{x:window.innerWidth < 996?'0%':'100%'}} animate={{x:'0%'}} transition={{delay:'1.6', type:'spring'}}><img src={blob} alt='hero section image'></img></motion.div>
Even the animations after the hero section don't look nice. I have used the react-intersection-observer to activate the animation on scrolling in this particular code.
<motion.div className='detailed' ref={refdetail} initial={{x:'100%', opacity:'0%'}} animate={{x: inViewdetail? '0%': '100%', opacity:inViewdetail? '100%': '0%'}} transition={{ delay:'1.5'}}>
Recently I have worked with framer.motion and it worked well out in my side.
I think that problem is related to the delay sub-prop you used in transition prop.
Here is my tested codebase with motion.framer which works fine in my side.
<motion.div
key={"setuplayout_motion"}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<SetupLayout setCurrentStep={setCurrentStep} />
</motion.div>
<motion.div
animate={{
x: authType === "sign-in" ? "10px" : "70px",
}}
transition={{
x: { type: "spring", stiffness: 100 },
duration: 0.8,
delay: 0.2,
}}
/>