I have two different objects I'm using to trigger two different Waypoints events which then trigger Velocity.js (a fade in/out library).
The first even (the one on secondary) should fire eternally, up and down and every time. The second however, on .process should only fire once and then never again until the page is reloaded.
When I insert .destroy(); in the second function, it shuts off all waypoints events for the entire page. Any idea why?
Page in reference: http://www.goodcorps.com/
if (document.documentElement.clientWidth > 990) {
$('.secondary').waypoint(function(direction) {
$('.intro').toggleClass('hidden');
}, {
offset: "0%",
});
$('.home .process').waypoint(function(direction) {
$('.illus.crosses svg g').velocity("transition.fadeIn", {
stagger: 50,
duration: 100,
});
$(this).destroy(); // here's my attempted location
}, {
offset: "20%",
});
} else {
$('.home .process').waypoint(function(direction) {
$('.illus.crosses svg g').velocity("transition.fadeIn", {
stagger: 50,
duration: 100,
});
$(this).destroy(); // here's my attempted location
}, {
offset: "50%",
});
}
The page you shared doesn't appear to contain the destroy calls you reference in your code sample, but if they were included you should have seen an uncaught TypeError "undefined is not a function". The reason: You're calling $(this).destroy() instead of this.destroy(). destroy is a function on a Waypoint instance. When you try to call it on a jQuery object, which $() will return, it should have blown up on you in the console because destroy is not a jQuery method. Am I missing something here?
Related
I've created a simple GSAP timeline animation to slide a fullscreen div over the entire viewport.
Because the page that it's going to be sliding in over has scrollable content on it, I've set the visibility to hidden, and pushed it off of the page. When I click the selected nav link, the class of "active" is added and the animation fires.
For some reason, when I reverse it, it removes the class immediately, even if I add something like this:
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
I've included all of the timeline code below, in case that's helpful to anyone:
var closeAbout = $('#close');
var openAbout = $('#about');
var main = $('main');
var timeline = new TimelineMax({
paused: true,
reversed: true
});
timeline
.to( "main", 0.3, {
opacity: 0,
}, 0)
.to(".about", 1, {
y: "0%",
ease: Power4.easeInOut
})
.to(".blurb", 1, {
y: "0%",
opacity: 1,
ease: Power4.easeInOut,
delay: 0.5
}, 0)
.to("#close", 0.5, {
opacity: 1,
ease: Power4.easeInOut,
delay: 0.8,
}, 0);
$(openAbout).on('click', "#about", function () {
$("#teambio").addClass('active');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
All I want is for the class to be removed AFTER the timeline finishes, and for some reason nothing that I've tried is working.
Also, I know that I could probably structure and name all of this better than it appears here, but I'm both new to GSAP and also just trying to get this to work.
Any help and patience would be greatly appreciated.
With something like this:
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
The .play() or .reverse() function will run and start animating. Once that function returns, the next line will run, removing the class. You wouldn't want the next line to wait for the animation to complete because then all of your JavaScript would be waiting for the animation to complete!
What you should do instead is make use of GSAP's onComplete callback:
var timeline = new TimelineMax({
paused: true,
reversed: true,
onComplete: function() {
$("#teambio").removeClass('active');
}
});
GSAP will fire that function every time the tween completes.
By the way, we recommend that you upgrade to GSAP 3 doing so is easy! The new formatting is quite nice once you're used to it.
I'm trying to swipe an element up/down to delete it.
I am using hammer.js and jQuery.
So far I can delete the element using swipe left/right which works fine.
But I need to achieve the exact same thing using swipe up/down.
I have created this working example here:
https://codepen.io/anon/pen/YJPPyB
click on the button and an element will appear and then Swipe left/right to delete it.
With the code above, I tried the followings but it doesn't work as expected:
$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
and
$toast
.removeClass('panning')
.animate({ bottom: 0, opacity: 1 }, {
duration: 300,
specialEasing: 'easeOutExpo',
queue: false
});
Can someone please advice on this issue?
Thanks in advance.
EDIT:
When I change this:
hammerHandler.on('pan', function (event) {
To this:
hammerHandler.on('pandow', function (event) {
I can move the element when I pandown but I dont know why it is very wonky!
This is how I swipe down now but it somtimes freezes the whole page and I dont undertand why!
hammerHandler.on('pandown', function (event) {
// Change toast state
$toast.addClass('panning');
var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
if (opacityPercent < 0)
opacityPercent = 0;
$toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
});
I am dynamically creating a page (in VB) and thus have a number of elements with the same class. I need to animate these individually, not as a group. I have done this in the past with the this selector. But I can't seem to get it functioning now.
$(".img").on("mouseover", function () {
$(".img").animate({
right: '75px',
speed: 'fast'
});
});
Replace the string selector with this
$(".img").on("mouseover", function () {
$(this).animate({
right: '75px',
speed: 'fast'
});
});
Inside the handler, this will be the specific .img instance in which the mouse hovered
I have an object accordionOptions which mediates the behavior of an accordion object
on my page. It looks like:
var accordionOptions = {
icons: {
header: 'ui-icon-circle-arrows-e',
activeHeader: 'ui-icon-notice'
},
animate: {
easing: 'easeOutBounce',
duration: 1000
}
}
I'm using that object to determine the behavior of my accordion like so:
$('#accordion1').accordion({
icons: accordionOptions.icons,
animate: accordionOptions.animate
});
I have an anchor tag on my page that when clicked I intend for it to have the same animation as the accordion when a new panel is clicked:
$('#btnChange').click(function () {
$('#test').animate({
easing: accordionOptions.animate.easing
});
});
You can see in the fiddle here this doesn't work. I've tried several things, all were non-successes. How can I attach my desired behavior to the test div using my accordionOptions argument?
Using easing for .animate is slightly different than for .accordion -- you need to pass the duration and easing separately from what should be animated. You should set a height or whatever property it should animate.
$('#test').animate({ height: 100 }, accordionOptions.animate.duration, accordionOptions.animate.easing);
Or shorter syntax similar to how you were originally doing it:
$('#test').animate({ height: 100 }, accordionOptions.animate);
Updated fiddle: http://jsfiddle.net/C6Eax/1/
I love the way the MacBook opens on the WhitePage (http://whitepagehq.com) homepage. I'd like to create a similar effect.
Is this created using CSS Animation, JQuery, or both? I can't seem to figure out from the Inspector. Have you seen a similar animation somewhere else?
How can I make something like this for my website?
There are two images:
<img src="lib/img/laptop-closed.png" class="lid-closed"/>
<img src="lib/img/laptop-open.png?1" class="lid-open"/>
The animation simply involves changing the laptop-open.png image's height on document ready.
This is done using jQuery (within the main page from line 126):
setTimeout(function () {
$('.lid-closed').animate({
top:10,
height:9,
width:840
}, {
easing:'linear',
duration:500
});
$('.lid-open').animate({
height:207
}, {
easing:'easeOutQuad',
duration:1000
});
}, 1000);
They are using jquery to animate the height of the open laptop image:
setTimeout(function(){
$('.lid-closed').animate({
top: 10,
height: 9,
width: 840
},
{
easing: 'linear',
duration: 500
});$('.lid-open').animate({
height: 207
},
{
easing: 'easeOutQuad',
duration: 1000
});
},
1000);
This code is done by jQuery.animate() method, you can find it in their inline js script. (View Source -> line 126). Basically they vary the height of the 'open' image at the same time as the 'closed' image. Open image expands and the closed part of the lid moves up.