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
Related
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 have figured out how to set the size for an annotation individually:
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 50,
xAxis: 0,
yAxis: 0
},
height: 100,
shape: "rect",
text: "test",
verticalAlign: "bottom"
}
]
I would like it to position between 50 and 150. How can I achieve that?
And additionally, I would like the text to be aligned in the center of the box?!
You can calculate the height by using toPixels method. You have to also take a padding into account. To center the text you can use asynchronous function, because annotations do not exist in load event yet.
chart: {
events: {
load: function() {
const chart = this;
const height =
chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);
chart.addAnnotation({
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 150,
xAxis: 0,
yAxis: 0
},
y: 0,
padding: 0,
height: height,
shape: "rect",
text: "test",
verticalAlign: "top"
}
]
});
}
}
}
Live demo: https://codesandbox.io/s/qqqkx2zr49
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
https://www.highcharts.com/demo/gauge-speedometer
Need this chart in React. Implemented Solid Gauge but was not able to implement this Gauge Series.
Here is the Sandbox for reference where the Solid Gauge is working but not series graph. Uncommenting the GaugeSeries leads to tooltip of null error.
https://codesandbox.io/s/38rk6wvnrq
Your plotOptions should be part of chart options in
<HighchartsChart
chart=
I suggest changing the name of the variable, so it will not be misleading - e.g. to chartOptions.
Second, and the most important problem is caused by a typo - series type is gauge and not guage the:
<Series id="series" name="Value" data={[80]} type="guage" />
Based on the code:
import React, { Component } from "react";
import Highcharts from "highcharts";
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/exporting")(Highcharts);
import {
HighchartsChart,
withHighcharts,
Series,
XAxis,
YAxis,
Tooltip
} from "react-jsx-highcharts";
const plotOptions = {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
};
const paneOptions = {
startAngle: -120,
endAngle: 120,
background: [
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, "#FFF"], [1, "#333"]]
},
borderWidth: 0,
outerRadius: "109%"
},
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, "#333"], [1, "#FFF"]]
},
borderWidth: 1,
outerRadius: "107%"
},
{
backgroundColor: "#DDD",
borderWidth: 0,
outerRadius: "105%",
innerRadius: "103%"
}
]
};
const GraphRender = ({ data }) => {
return (
<div className="gauge-empty">
<div className="no-data">Data Unavaialble</div>
<HighchartsChart
chart={{ type: "gauge" }}
plotOptions={plotOptions}
pane={paneOptions}
>
<Tooltip padding={10} hideDelay={250} shape="square" />
<XAxis />
<YAxis
id="myAxis"
min={0}
max={100}
minorTickInterval="auto"
minorTickWidth={1}
minorTickLength={10}
minorTickPosition="inside"
minorTickColor="#666"
tickPixelInterval={30}
tickWidth={2}
tickPosition="inside"
tickLength={10}
tickColor="#666"
labels={{
step: 2,
rotation: "auto"
}}
title={{
text: ""
}}
plotBands={[
{
from: 0,
to: 60,
color: "#55BF3B" // green
},
{
from: 60,
to: 80,
color: "#DDDF0D" // yellow
},
{
from: 80,
to: 100,
color: "#DF5353" // red
}
]}
>
<Series id="series" name="Value" data={[80]} type="guage" />
</YAxis>
</HighchartsChart>
</div>
);
};
const Gauge = ({ data }) => <GraphRender data={data} />;
export default withHighcharts(Gauge, Highcharts);
(I have not resolved the problem with the chart option - you can move the options into the correct place if you want them to work. I'm not sure if you want them or if those were set only for the demo purpose)