Develop Reference

i want to toggle between two functions this code works only one time but i want to make it work each time i click

let callOne = true;
let hamburger = document.getElementById("hamburger");
hamburger.addEventListener("click", (e) => {toggleFct();});
function one() {t1.play();callOne = false;}
function two() {t0.play(); callOne = true;}
function toggleFct() { callOne ? one() : two();}
let t1 = gsap.timeline({ paused: true, reversed: true });
t1.to(".div-first", { ease: "power2.in", x: "-200%", duration: 2 });
t1.to(".div-second", { ease: "power2.in", x: "-300%", duration: 2 },"-=2");
t1.to(".div-third", { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
t1.to(header, { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
t1.to(wrap, { ease: "power2.in", x: "-400%", duration: 2 }, "-=2");
let t0 = gsap.timeline({ paused: true, reversed: true });
t0.to(".div-first", { ease: "power2.in", x: "100%", duration: 2 });
t0.to(".div-second", { ease: "power2.in", x: "200%", duration: 2 }, "-=2");
t0.to(".div-third", { ease: "power2.in", x: "300%", duration: 2 }, "-=2");
t0.to(header, { ease: "power2.in", x: "400%", duration: 2 }, "-=2");
t0.to(wrap, { ease: "power2.in", x: "0%", duration: 2 }, "-=2");

let callOne = true;
let hamburger = document.getElementById("hamburger");
hamburger.addEventListener("click", (e) => {toggleFct();});
function one() {t1.play(0);callOne = false;}
function two() {t0.play(0); callOne = true;}
function toggleFct() { callOne ? one() : two();}

When I try to do the following :
let callOne = true;
function one() {console.log("one");callOne = false;}
function two() {console.log("two"); callOne = true;}
function toggleFct() { callOne ? one() : two();}
It works just fine...
btw you can rewrite
hamburger.addEventListener("click", (e) => {toggleFct();});
as...
hamburger.addEventListener("click", toggleFct)

How to exit a method in Phaser3 only when the played timeline is finished?

I'm quite new in Phaser, but I've already done a bunch of ionic/angular app.
One of my object has a method that will be called by the main scene:
powerOff() {
let easing = 'Cubic'
let overallDuration = 500
let visiblePauseDuration = 100
let flashDuration = overallDuration - visiblePauseDuration / 2
this.scene.tweens.timeline({
tweens: [
{
targets: this,
duration: 0,
tint: 0xff0000,
ease: easing,
},
{
targets: this,
duration: flashDuration,
tint: 0xffffff,
ease: easing,
},
{
targets: this,
duration: visiblePauseDuration,
tint: 0xff0000,
ease: easing,
},
{
targets: this,
duration: flashDuration,
tint: 0xffffff,
ease: easing,
},
{
targets: this,
duration: visiblePauseDuration,
tint: 0xff0000,
ease: easing,
onComplete: () => {
this.scene.sound.play(MainScene.POWER_DOWN)
},
},
{
targets: this,
duration: flashDuration,
tint: 0xf54242,
ease: easing,
},
],
})
this.poweredUp = false
}
The thing is: I need to exit this method only when the timeline has completed.
Is there some await/async support? Or at least promises ?
The scene will call this method on a lot of different objects, and I need that they are not done in parallel but sequentially.
Thanks a lot!!!

var timeline = this.scene.tweens.timeline({
/*TWEENS*/
})
//Timeline complete event listener
timeline.addListener("complete", function(){
//Do something when tweens are complete
}, this);

Stop GSAP function after it runs

I'm very new to the concept of web animations.
I'm right now developing "Windows Hello animation".
IN THIS CODE EXAMPLE -
HOW DO I STOP THE ANIMATION AFTER 1st Run, and trigger another JS function afterward.
I've tried many things but couldn't get it to work.
Please help me with where should I change the code.
CODE-
JS
var mainCtr = $("#main-ctr"),
hello = $(".hello"),
eyeLeft = $("#eye-left"),
eyeRight = $("#eye-right"),
eyeToLeft = $("#eye-to-left"),
eyeToRight = $("#eye-to-right"),
wink = $("#wink"),
smileUp = $("#smile-up"),
smileDown = $("#smile-down"),
smile = $("#smile");
var tl = new TimelineMax({
repeat: -1,
repeatDelay: .3,
delay: .3
});
TweenMax.set([mainCtr, hello], {
opacity: 0
});
tl
.to(mainCtr, .3, {
opacity: 1
})
.to(smileDown, .3, {
morphSVG: "#smile-up"
})
.to(smile, .3, {
rotation: -30,
transformOrigin: "center center",
ease: Circ.ease
})
.to(smile, .9, {
rotation: 900,
transformOrigin: "center center",
ease: Circ.easeInOut
})
.to(eyeLeft, .3, {
morphSVG: "#eye-to-left",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .3, {
morphSVG: "#eye-to-right",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .1, {
scaleY: .25,
transformOrigin: "center center"
})
.to(eyeRight, .1, {
scaleY: 1
})
.to(hello, .3, {
opacity: 1
}, "-=.3")
.to(mainCtr, .6, {
delay: 1,
opacity: 0
})
YOU CAN SEE THE CODE LIVE HERE

You can, acheive this by simply removing the repeat and repeatDelay from the TimelineMax function options and to fire a callback once the animation is complete you can use the onComplete option in the TimelineMax function like below:
var tl = new TimelineMax({
delay: .3,
onComplete: function(){
alert('hello')
}
});

I updated your codepen with what you are looking for: here
var mainCtr = $("#main-ctr"),
hello = $(".hello"),
eyeLeft = $("#eye-left"),
eyeRight = $("#eye-right"),
eyeToLeft = $("#eye-to-left"),
eyeToRight = $("#eye-to-right"),
wink = $("#wink"),
smileUp = $("#smile-up"),
smileDown = $("#smile-down"),
smile = $("#smile");
var tl = new TimelineMax();
TweenMax.set([mainCtr, hello], {
opacity: 0
});
tl
.to(mainCtr, .3, {
opacity: 1
})
.to(smileDown, .3, {
morphSVG: "#smile-up"
})
.to(smile, .3, {
rotation: -30,
transformOrigin: "center center",
ease: Circ.ease
})
.to(smile, .9, {
rotation: 900,
transformOrigin: "center center",
ease: Circ.easeInOut
})
.to(eyeLeft, .3, {
morphSVG: "#eye-to-left",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .3, {
morphSVG: "#eye-to-right",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .1, {
scaleY: .25,
transformOrigin: "center center"
})
.to(eyeRight, .1, {
scaleY: 1
})
.to(hello, .3, {
opacity: 1
}, "-=.3")
You only needed to remove the repeat attribute when you set up your timeline at line 12 (if you set repeat: -1, it means it will be an infinite loop).
To notice I updated the last line as well, so the smile stays there. If you want it to disappear instead, then you just need to add back this bit of code at the end of your js file:
.to(mainCtr, .6, {
delay: 1,
opacity: 0
})

jQuery to monitor links to see if they are hovered over, if they are go up 3 parents and add css/class

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();
}

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});