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?
Related
I am working on a React JS project. In my project, I need to create line chart components. I am trying to use React Plotly.js library for React JS. I made a few changes to the shape property to show a different color array for each sniper data.
image description
This is my code
export const convertListIc = [{
layer: "below",
x0: 0,
y0: 0,
x1: 1.31,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "black",
opacity: 0.6,},{
layer: "below",
x0: 1.31,
y0: 0,
x1: 2.05,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "grey",
opacity: 0.6,},{
layer: "below",
x0: 2.05,
y0: 0,
x1: 2.6,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "green",
opacity: 0.6,},{
layer: "below",
x0: 2.6,
y0: 0,
x1: 2.95,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "yellow",
opacity: 0.6,},{
layer: "below",
x0: 2.95,
y0: 0,
x1: 3.06,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "red",
opacity: 0.6, },{
layer: "below",
x0: 3.06,
y0: 0,
x1: 4.0,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "brown",
opacity: 0.6,},];
is there a way to get rid of those black vertical grids between those colored areas?
You can remove all grid lines from the background using the following:
var data = ...
var layout = {
xaxis: {
showgrid: False
},
yaxis: {
showgrid: False
}
};
Plotly.newPlot('myDiv', data,layout);
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});
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
See the fiddle for the test code: https://fiddle.sencha.com/#fiddle/1jro
or code below:
Ext.application({
name : 'Fiddle',
launch : function() {
var container = new Ext.draw.Container({
renderTo: Ext.getBody(),
width: 400,
height: 300
});
var surf = container.getSurface();
var s1 = surf.add({
type: 'rect',
x: 50, y: 10, width: 300, height: 80, radius: 50,
fillStyle: '#ff0000', strokeStyle: 'black'
});
var s2 = surf.add({
type: 'path', path: 'M 50, 110 l 100 80 l 100 -80 l 100 80',
fillStyle: '#00ff00', strokeStyle: 'black'
});
var s3 = surf.add({
type: 'rect',
x: 50, y: 210, width: 300, height: 80, radius: 50,
fillStyle: '#0000ff', strokeStyle: 'black'
});
container.renderFrame();
// Resize (halve x and y)
setTimeout(function() {
container.setSize(200, 150);
s1.setAttributes({scalingX: 0.5, scalingY: 0.5});
s2.setAttributes({scalingX: 0.5, scalingY: 0.5});
s3.setAttributes({scalingX: 0.5, scalingY: 0.5});
container.renderFrame();
}, 5000);
}
});
What I would like to do is to be able to scale the entire draw container with all sprites moved and scaled appropriately. When I halve the container, the whole image should just get smaller. Can this be done is some way? My current implementaion is wrong as only scaling is applied and the positions are invalid.
The answer is simple in the end. Just use scalingCenter(X and Y):
s1.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});
s2.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});
s3.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});