Hello. i need a help. I am playing few animations on click of each menu links as you can see in the image. The code for the animation is this
what i need is on the page there is a plus icon which is outside that menu. On click of that plus icon i need to play same animation which is being played on the first menu link. Then when the slider changes on click of plus of another slide the second menu animation should be played. How can i achieve this .?
var currentAnimation;
var requestedAnimation;
$(".link").each(function (index, element) {
var pagelink = $(this).attr("data-link");
gsap.set("." + pagelink + " .close-scroll-indicator", {
rotation: 0,
scale: 0,
x: "0%",
y: "0%",
}),
gsap.set("." + pagelink + " .reveal", { autoAlpha: 1 });
var trans = gsap.timeline({
paused: true,
onReverseComplete: playRequestedAnimation,
defaults: {
duration: 0.6,
delay: 0.2,
ease: Power4.easeOut,
},
});
if (pagelink == "pageproduct") {
trans
.to("." + pagelink, { zIndex: 5, opacity: 1 })
.from("." + pagelink + " .frame-product-left", { y: "100%" }, 0)
.from("." + pagelink + " .frame-product-middle", { y: "-100%" }, 0.3)
.from("." + pagelink + " .frame-product-right", { y: "100%" }, 0.6)
.reversed(true);
} else {
trans
.to("." + pagelink, { zIndex: 5, opacity: 1 })
.from("." + pagelink + " .frame-left", { x: "-100%" }, 0)
.from("." + pagelink + " .frame-right", { x: "100%" }, 0)
.from(
"." + pagelink + " .reveal",
1,
{ xPercent: -140, ease: Power4.out },
0.7
)
.from("." + pagelink + " .reveal-image", 1, {
xPercent: 100,
delay: -1,
ease: Power4.out,
})
.from("." + pagelink + " .pic-text", { x: "100%", duration: 1.4 }, 1.1)
.to(
"." + pagelink + " .close-scroll-indicator",
0.5,
{
scale: 1,
x: 0,
y: 0,
rotation: 90,
ease: Back.easeOut.config(1.7),
delay: 1,
},
1
)
.reversed(true);
}
this.animation = trans;
});
// ON CLICK OF PLUS SIGN
// $(".scorp-btn").click(function () {
// playRequestedAnimation();
// });
// FOR NORMAL LINKS ON
$(".link").click(function () {
$(".side-link").addClass("any-page-open");
$(".footer .right").hide();
$("footer.footer").css({ width: "50%" });
$(".pic-text").animate({ scrollTop: 0 }, 500, "swing");
let medialink = $(this).attr("data-link");
requestedAnimation = this.animation;
console.log("This is the requested animation", requestedAnimation);
console.log("requested animation for", medialink);
if (currentAnimation) {
//if there is a currentAnimation tell it to reverse
console.log("currentAnimation needs to be reversed");
currentAnimation.reverse();
//currentAnimation = requestedAnimation;
//requestedAnimation.play();
} else {
console.log("Current Animation", currentAnimation);
console.log("Animation playing for the first time");
playRequestedAnimation();
console.log("Current Animation", currentAnimation);
}
if (requestedAnimation == currentAnimation) {
console.log("Requested is equal to current");
requestedAnimation.play();
}
if ($(window).width() < 768) {
$(".menu-mobile .fa").toggleClass("fa-times");
$(".main-menu").toggleClass("main-menu-open");
}
$(".media-slides img").addClass("hide-image");
if (medialink == "pageevent" || medialink == "pagemedia") {
console.log("YEs it is " + medialink);
setTimeout(function () {
slick();
$(".media-slides img").removeClass("hide-image");
}, 3000);
} else {
$(".media-carousel").slick("unslick");
$(".media-slides img").addClass("hide-image");
}
});
function playRequestedAnimation() {
console.log("ready to play requested animation");
console.log("Requested Animation", requestedAnimation);
if (requestedAnimation != undefined) {
requestedAnimation.play();
}
currentAnimation = requestedAnimation;
console.log(currentAnimation);
}
function reversecurrentanimation() {
currentAnimation.reverse();
}