We Keep Coding

How can i make a child animation happen every time the parent animation is beginning using framer motion & react

I'm trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.
instead only the first time the animations run it works but after that only the movement animation repeats itself, if I try to repeat the squeeze animation it just gets out of order
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div variants={MoveVariants} initial={"hidden"} animate={"visible"}>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;

You just needed to add to your shapeVariants transition to get them to sync up.
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2, /* new */
repeat: Infinity, /* new */
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div
variants={MoveVariants}
initial={"hidden"}
animate={"visible"}
>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;
I would also recommend using originX and originY to manipulate the spring transition on the bubble otherwise it will animate the bounce based on the top left corner. I would use percentage values such as originX: "50%" but it depends on the effect you are looking for.

The cascading animation in framer-motion is powered by the variant being propagated through the children.
You are running into this setback because you are only animating to the `visible variant once. Thus the variant propagation only happens once.
Potential Solutions
Dumb solution: include a duration into the shapeVariant and make it also repeat then manually time your animation to where you need it. This isn't optimal because you probably want your bubble animation to be type spring?
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2,
repeat: Infinity
},
},
};
Alternatively you could control your animation with an effect that would use setTimeout or something to change the variant of the parent over and over to get the cascading effect

How to add slideWidth into a breakpoint in Glide.js

I have to set the slide width to a specific size if the viewport is between a range.
breakpoints: {
767: {
perView: 1,
peek: 193,
slideWidth: 277
},
1023: {
perView: 1,
peek: 212,
}
}
The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it.
The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.
I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.

Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo
new Glide('#glide1', {
type: 'carousel',
perView: 3,
breakpoints: {
800: {
perView: 1
}
}
}).mount();

I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div
.glide-wrapper {
max-width: 100vw;
overflow: hidden;
}
.glide {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.glide__track {
overflow: visible!important;
}
const glide = new Glide('.glide', {
type: 'carousel',
breakpoints: {
1280: {
gap: 16,
focusAt: "center",
perView: 1,
peek: {
before: 16,
after: 16
},
},
}
}).mount({Swipe, Controls, Breakpoints });

Velocity.js display: 'block' doesn't work when combined with left: '-50px'

Any ideas why when I add {left: '-50px'}, to the velocity command that the display: 'block' and opacity: 1 aren't applied.
In the CSS .popover is set to display: none and opacity: 0
The whole thing works fine if I remove the display property out of velocity and use .show() from jQuery, but I want to try do it all in velocity.
('.popover').velocity({left: '-50px'}, {"opacity": 1}, {display: 'block'});

You are using it wrong, the first object passed to velocity needs to contain the properties to be animated, with the second you are passing options:
$('.popover').velocity({
left: '-50px',
opacity: 1,
display: 'block'
}, {duration: 1000});
According to the documentation:
$element.velocity({
width: "500px",
property2: value2
}, {
/* Velocity's default options */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});

Animating like balloon bursting using javascript / jquery

I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.

Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});

Strange jquery animation behavior

The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>

The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});

Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);