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});
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 am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
I've been looking for an answer for this Problem without any success. Today i've successfully created a workaround.
The Apex Radialbar just hardcoded always goes clockwise, no matter what you do because it is always going from startAngle to endAngle using +1.
So using startAngle -360 and endAngle 0 will have no effect.
Essentially, you want to create the Radialbar and mirror it on Y axis and then remirror everyhting you want to keep normal, back to normal. However you need to transform the components usually back in place.
You can also try only selecting the Radialbar and only rotating that, however i find getting the other components back in the correct place using "transformX" is usually easier.
so lets say you want a Bar from -360 to 90 but counter-clockwise,
create a Radialbar from 0 to 270 and then use the following CSS transforms.
Here is the example Radialbar from the Angular Documentation with a counter-clockwise bar.
TIPP:
Use exact classifiers and unique, here in ng-deep with
counter-clockwise svg
Because once you use ng-deep you cannot unset it, unless you modify the document directly, so when you switch views you might have unwanted sideeffects.
Mirrored
Original
Change startAngle and endAngle options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
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 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
I am trying to understand how the react-spring interpolation works.
Here is my spring:
const { x } = useSpring({ from: { x: 0 }, x: 100, config: { duration: 1000 } })
Here is how I am using it:
...
return (
<animated.div style={{
background: "lightblue",
height: "100%",
width: x.interpolate([0, 0.5, 1], [0, 100, 0]).interpolate(x => `${x}%`)
}} />
)
The interpolation happens but it is not rendered.
Here is a sandbox:
https://codesandbox.io/s/amazing-panini-fzn54?fontsize=14&hidenavigation=1&theme=dark
Can you help me figure out what's wrong with this code?
It is almost there. If you want to use range, in the interpolation from [0, 0.5, 1] to [0, 100, 0] Then you should change the x value between 0 and 1.
So I would change this part:
const { x } = useSpring({ from: { x: 0 }, x: 1, config: { duration: 1000 } })
I also fixed the codesandbox, but it is a little different it uses the renderprops api.
https://codesandbox.io/s/tender-varahamihira-6nic7?file=/src/App.js:63-123