I'm adding animations to a website, and having a bit of a hard time adding easing. I can get the entire animation sequence to run correctly, but when I try to define the easing, the animations break on all the animations that come after the first element where I define easing.
The basic animation sequence is the bottom half the page fades in and flies up to meet the top half. Then three buttons fade in and fly up sequentially to their designated locations. It looks alright, but it would look a lot better with easOutBounce.
I have now been wrestling with this for too long, trying to figure out why adding the easing breaks my code. I'm guessing my syntax is incorrect.
THIS code works on all elements:
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 } );
} );
} );
});
BUT this code doesn't. When I run this code, it does add the easing and it still works on the .front-page-content-wrap, and the #box-button-1, but then it stops.
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
} );
} );
});
Any ideas?
PS, I'm using jQuery as the variable identifier instead of $, because I'm working in wordpress which runs in no-conflict mode.
Try this syntax: .animate( properties, options )
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
}});
}});
});
http://jsfiddle.net/mblase75/42BjC/
Related
I have lots of links on my page with the HTML format of:
<div class="heading-column">
<div class="heading-container">
<h2 class="heading-item">
<a href="/find/">Find</h2>
</div>
</div>
</div>
Currently we have some animations happening when they hover over the heading-column element, but they should actually only happen when hovering over the a hyperlink.
I'm trying to figure out how to create some jQuery to monitor all hyperlinks, if one with the class of .heading-item a is hovered over for it to update its parent 3 higher (.heading-column) by adding the css of pointer-events: auto; but as soon as the mouse stops hovering, this css rule should be deleted so that the pointer-events: none; stops the .heading-column animation/hover from happening
I'd greatly appreciate some help
Have you tried:
$(".heading-column a").hover(function(){
// In
$(this).closest(".heading-column").css("pointer-events", "none");
}, function(){
// Out
$(this).closest(".heading-column").css("pointer-events", "auto");
});
Reference: https://api.jquery.com/hover/
Might consider adding and removing a Class too.
See if this helps -
https://codepen.io/VweMWoz
const tl = gsap.timeline({paused: true});
tl.from(
".gsap-swipe",
{
y: 20,
x: 20,
rotate: -40,
duration: 3,
transformOrigin: '30% 80%',
ease: Elastic.easeOut.config(1, 0.5),
}, 0
)
.fromTo(
".swipe",
{
xPercent: -100
},
{
duration: 1,
xPercent: 100,
ease: Sine.easeInOut,
stagger: {
each: 0.15
}
}, 0
)
.from(
".maskSwipe",
{
xPercent: -100,
ease: Sine.easeInOut
},
0.4
)
.from(
"#hello",
{
duration: 1.5,
drawSVG: "0%"
},
1
)
.from(
".swoop",
{
duration: 2,
drawSVG: "0%"
},
1
)
.from(
".line",
{
drawSVG: "0%",
duration: 0.5,
stagger: {
each: 0.2
}
},
1
)
.from(
".shape",
{
scale: 0,
duration: 1.3,
transformOrigin: "50% 50%",
rotate: '+=random(-60, 60)',
ease: Elastic.easeOut.config(1, 0.8),
stagger: {
each: 0.2
}
},
0.2
);
// ScrubGSAPTimeline(tl);
let hover = document.querySelector('.js-hover');
hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);
function playTl(){
tl.timeScale(1.25).restart();
}
function resetTl(){
tl.progress(0).pause();
}
I am trying to figure out this framework, but I am having problems with implementing shaking effect. Everytime I hover over element other divs just dissappear. In fiddle i tried different JQuery and JQuery ui and it was working but selecting newest one just breaks the whole thing. ANy tips? Thank you!
https://jsfiddle.net/w11qknc4/
$( ".box" ).mouseenter(function() {
$( this ).effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );
$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});
This line is not necessary and causes your issue :
$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
Just use :
$( ".box" ).mouseover(function() {
$(this).effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});
If you wish to wait the end of an effect before another, see use :
var start = true,
delay = 1000;
$(".box").mouseover(function() {
if (start) {
start = false;
$(this).effect("shake", { direction: "up", times: 4, distance: 2}, delay);
setTimeout(function () {
start = true;
}, delay)
}
});
Hey all I am trying to call out animations in order. Currently the code below seems to call them all out at the same time even with the delay function (which doesn't seem to be working at all...)
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })
What all would I need to do in order to have the execute one at a time?
If you want the animations to happen sequentially you should nest each animation in the complete callback of the prior:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' });
})
})
})
.animate reference: http://api.jquery.com/animate/
You either need to send the next one as a callback, or use incremental delays.
Callbacks:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
});
});
});
});
Incremental delays:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(2700).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(4900).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(7100).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice1 complete.
$(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice2 complete.
.....
} })
});
Personally, I'd use a much more DRY implementation that doesn't repeat so much code and triggers the next animation based on the completion callback of the previous one:
function runAnimations() {
var cntr = 1, top = -15;
function next() {
if (cntr <= 4) {
$(".overlayChoice" + cntr).delay(500)
.animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next);
++cntr;
top -= 30;
}
}
next();
}
With this code, none of the animations happen - it skips straight to the location.reload(). However, if I remove location.reload(), the animations work fine.
How can I have both?
$( "#welcome" ).animate({
opacity: 0,
}, 100, function() {
})
$( "#signup_link" ).animate({
opacity: 0,
}, 200, function() {
})
$( "#forgotten" ).animate({
opacity: 0,
}, 200, function() {
})
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000);
location.reload();
Perhaps something like this: I'm assuming you want the animations and reload to fire as you have them sitting in your original post. jsfiddle: http://jsfiddle.net/Pv4RV/2/
note: I commented out the 'reload' part as that will then just generate a loop on the page.
$.when(
function(){
$( "#welcome" ).animate({opacity: 0,}, 100, function() {});
$( "#signup_link" ).animate({opacity: 0,}, 200, function() {});
$( "#forgotten" ).animate({opacity: 0,}, 200, function() {});
}()
).then(
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000)
).then(
location.reload()
)
success: function(html){
var halfh = html.height;
$('#contact_'+id).show();
$('#contact_'+id).css({'width':'90%'}).animate({
opacity: '0.6',
height: halfh
}, 500 ,'linear').animate({
opacity: '1',
},500,'linear',function(){ <--- Error on this line
$(this).html(html.content)
});
Note: I changed it all to Double quote like:
opacity: "0.6",
height: halfh
}, 500 ,"linear").animate({
opacity:"1",
},500,"linear",function(){
BUT still same error :(
Please help.
Regards
As in my previous comment. There is a trailing comma.
opacity:"0.6",
height: halfh
}, 500 ,"linear").animate({
opacity:"1"
},500,"linear",function(){
as #soderslatt wrote in the comment, there is a wrong comma. removed it and optimized your code a bit.
success: function(html){
$('#contact_' + id).show().css({'width': '90%'}).animate({
opacity: 0.6,
height: html.height
}, 500, 'linear').animate({
opacity: 1
}, 500, 'linear', function() {
$(this).html(html.content);
});
}
}, 500 ,'linear').animate({
opacity:'1', <--- Remove this comma
},500,'linear',function(){