Develop Reference

Start multiple animations simultaneously in Framer Motion

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.

Stop repeating animation - CSS, JS

I have text animated in JavaScript and CSS but the problem is that text is repeated constantly. How I can stop repeating after is shown once and stay displayed.
Javascript code is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.slogan');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.slogan .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.slogan',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
The final result that I need is an after-show slogan to stay like that till customers refresh the page and stop repeating after 1 time.
Thanks all

JavaScript rotation is wrong after translating

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>

scroll with scripty2

how can you scroll with scripty2??
document.body.scrollTo(300, {
transition: 'easeInOutQuad',
duration: 0.5
});
have also tried with window.scrollTo()
EDIT:
this doesnt work either
$(document.body).scrollTo(300, {
transition: 'easeInOutQuad',
duration: 0.5
});
but in some other code this works fine
this.loader.morph('opacity:1; filter:aplha(opacity=100)', {
transition: 'easeInOutQuad',
duration: 0.5
});

document.body is not automatically a scripty element. You need to either turn it into one, IIRC like so:
$(document.body).scrollTo(.......);
or use Element.scrollTo:
Element.scrollTo(document.body, .....);

how can i slideDown A Hidden element from 0 opacity to 1 with jquery

i have a coke like below that using jquery prototype Library:
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
this code force the imageDataContainer element to sliding Down From 0 Opacity To 1 Opacity.
how can i implement upper codes with new downloaded jquery library from jquery.com web site?
the syntax of slideDown is like this :
http://www.w3schools.com/jquery/eff_slidedown.asp
i know how slideDown And fadeTo Functions Work in jquery / but how can i combine them like the upper codes?
i test the below code - but u can not changing the opacity --DURING-- toggle :
$('#lightbox-container-image-data-box').animate({
opacity: 0,
height: 'toggle',
opacity: 1
}, 400, function() {
// Animation complete.
});
thanks 4 attention

Use animate() for that. With animate you can animate any arbitrary number of properties on an element.
Check a demo of the code below here: http://jsfiddle.net/chrisramakers/8ewEp/
$('#book').hide();
$('#book').animate({
opacity: 'toggle',
height: 'toggle'
});