I am using transit.js for a certain experiment.
I am trying to make a square to go for an infinite animation of moving to the right while flipping itself.
But using a loop, the square only flips once,and the rest of the time it just moves to the right. Any suggestion?
<body>
<div id="square" style="width:200px;height:200px;transform: perspective(100px) rotateX(180deg);">
</div>
<script src="http://code.jquery.com/jquery-1.9.0b1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0b1.js"></script>
<script src="js/transition.js"></script>
<script>
var animating = false;
transit();
function transit(){
if (!animating)
{
animating = true;
$('#square').transition({
perspective: '500px',
x: '+=50',
rotateX: 180,
rotateY: 180
},'slow',function (){animating = false; });
window.setTimeout(function() { transit() }, 1000);
}
}
</script>
Once the square rotated 180 deg, every iteration set it as 180 deg, which is it's current rotation value hense no animation.. Incrementing up the way you do with the x-axis will rotate every iteration. IE rotateX: '+=180'
http://jsfiddle.net/75p76esy/1/
$('#square').transition({
perspective: '500px',
x: '+=50',
rotateX: '+=180',
rotateY: '+=180'
};
Related
I'm new to Framer Motion (and animations in general) and am trying to replicate the below GSAP effect
https://codepen.io/cameronknight/pen/pogQKwR
I can achieve the reveal effect and scale effect individually, but when applying both animations,
only one of the animation triggers, and the remainder of the second animation only triggers after the first has completed.
I've tried altering the delay, duration etc. but to no avail, and was wondering if there was any alternative method to trigger both animations at the same time (or with very minimal delay).
The code can be found below:
I have a motion image element, and a motion div element on top styled to be the exact same dimensions on top of the image element. An X transformation is applied to the motion div element to achieve the reveal effect. I then tried to apply a scale effect to the motion image element, and this is where the problem occurs.
function App() {
const overlayVariant = {
start: {
x: "0%",
opacity: 1,
},
end: {
x: "100%",
transition: {
delay: 0.5,
duration: 1,
ease: "easeInOut"
}
}
}
const imageVariant = {
start: {scale: 1.1},
end: {
scale: 1,
transition: {
delay: 0.5,
duration: 1,
ease: "easeOut"
}
}
}
return (
<main className="app-container">
<section className="app-contents">
<div className="app-image">
<motion.div
className="image-overlay"
variants={overlayVariant}
initial="start"
animate="end"
>
</motion.div>
<motion.img
src={image}
variants={imageVariant}
whileHover="hover"
transition={{duration: 0.6, ease: [0.43, 0.13, 0.23, 0.96]}}
initial="start"
animate="end"
/>
</div>
</section>
</main>
);
}
Thank you advance, and I would appreciate any help I could get.
I am new by Framer motion, what I am trying to do is imitating wheel motion by moving image while it is rotating
I don't know how to make this work
I have tried something like this but it doesn't work
const imageRuning :Variants = {
hidden:{
x:"-100vw",
opacity:0
},
visible:{
x:0,
opacity:1,
transitionDuration:"3s"
},
rotation:{
rotate:[180,0],
transition:{
repeat:Infinity,
type:"tween",
ease:"linear"
}
}
}
const HomePage =()=> {
return (
<div className={style.animationContainer}>
<motion.img
className={style.animatedImage}
variants={imageRuning}
initial="hidden"
animate={["visible","rotation"]}
width={100} height={100} src="/static/me.jpg" >
</motion.img>
</div>
)
any help please ,
It looks like you are trying to animate two properties (x and rotate) with different transition values.
You can only animate to one variant at a time, so if you want them to happen at the same time, you'll need to combine those into a single variant. Luckily, you can specify unique transition values for any animating property by listing it within the transition object.
Like this:
visible: {
x: 0,
opacity: 1,
rotate: 180, // rotate and x animate in the same variant
transition: {
duration: 3, // default transition duration (applies to x and opacity)
rotate: {
// unique transition for rotate property only
repeat: Infinity,
type: "tween",
ease: "linear"
}
}
}
The way you have it set up, the object will continue rotating even after the x animation finishes (repeat: Infinity). Is that what you want? You can look into Animation Controls if you want more control.
I am trying to create a infinite star rain animation, all stars are SVG's.
I tried this to create the animation:
(function($) {
TweenMax.set(".astar", {
x:function(i) {
return i * 50;
}
});
TweenMax.to(".astar", 5, {
ease: Linear.easeNone,
x: "+=500", //move each box 500px to right
modifiers: {
x: function(x) {
return x % 500; //force x value to be between 0 and 500 using modulus
}
},
repeat: -1
});
})(jQuery);
The repeat process is not smooth as you can see on this Codepen:
https://codepen.io/daniellwdb/pen/NXogoB
Is there any JS or GSAP solution to make the animation smooth so that it will look like stars keep spawning from the left and move to the right?
With your current setup, I think the easiest way to pull this off would be to duplicate your starfield so that the beginning of your next loop is identical to the end of your first one. Let's say this is your starfield SVG:
|...o.|
|o....|
|..o..|
Your new "duplicated" starfield would essentially be:
|...o.|...o.|
|o....|o....|
|..o..|..o..|
So when you move that duplicated image from left to right 100%, what you see in the last "frame" is identical to what it will return to when it loops.
Here's a fiddle that shows this concept in action: https://jsfiddle.net/yarp4oLs/5/
I have two identical starfield images that are 200x200 (so 400x200 when side-by-side) and they are displayed in a "viewport" container that is 200x200. Then I just slide them to the left 200px and repeat. Instant stars!
I'm using Velocity.js for animation.
I'm first translating and rotating an object. After the animation is complete I need to rotate the object by an additional 360 degrees.
The problem is that during the second animation the rotation axis is off. Instead of rotating around the center the object rotates around its original point.
$.Velocity( obj, "stop" );
$.Velocity( obj,
{translateX: pos, rotateZ: rotation + 'deg'},
{duration: 1000, complete: function() {
$.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
});
What may be the problem?
UPDATE
Codepen that demonstrates the issue: http://codepen.io/anon/pen/MYZaaj
This is because Velocity currently does not parse initial transform values. From the docs:
Note that Velocity's performance optimizations have the byproduct of ignoring outside changes to transform values (including initial values as defined in your stylesheets, but this is remedied via Forcefeeding). (You can manually set transform values within Velocity by using the Hook function.)
This will be addressed in future version but currently follow the advice below to use forcefeeding to fix it.
Sorry, I don't have enough points to comment, but hook (the other answer is right). Just add $.Velocity.hook(circle, "translateY", "0");
var circle = $(".circle");
circle.velocity({
translateX: 500,
rotateZ: 360
}, {
duration: 2500
}).delay(500).velocity({
rotateZ: -360 * 2,
translateY: 200
}, {
duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");
circle.delay(500)
.velocity({
translateY: 0,
rotateZ: -360 * 5
}, {
duration: 2500
});
.circle {
background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
width: 128px;
height: 128px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<div class="circle">
</div>
I have a question about the .animate() Api in Raphael.js
There is a rectangle which I would like animate the width and height.
r.animate({ width: 50, height: 50 }, 1000, "bounce");
But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?
FIDDLE
There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.
Here is the DEMO
r.click(function() { r.animate({ transform:'s2' }, 500); });
Note that transform:'s2' means scale it 2x. Hope this helped ;)
EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.
You can use x and y to move the retangle and simulate it growing from center.
r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });
Here is a FIDDLE