[GSAP Animation not working on Safari]

Hello, i have this animation done on GSAP. I used motionpathplugin for this animation. Problem is this animation is working perfectly in chrome but not working on safari or iphone 11. Does any one have any idea why this is happening. Please help. Below is the link to the website.

 

https://solaris-webthree.web.app/

 

 

[On click of some button play the same animation played on the click of menu links]

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

  }

[Reverse Animation and play new one]

Hello. i am stucked in a function. I just want to reverse and play animation based on click.

Suppose when i click on button the previous animation should get reverse and the new animation should be played. 

i have multiple divs.

i want that if i click on div 2 div 1 animation should be reversed and div2 animation should be played.

similary if i keep on clicking div 3 then div 2 animation should get reveresed and so on...

 

the problem currently is its not playing the second animation after reversing the first one

[Reverse Animation and play new one]

 

  // MAIN HOME PAGE SLIDER

  var currentslide = 0;

  gsap.set(".project", {autoAlpha: 0})

  var homepageslider = gsap.timeline({

    paused:true,

    defaults: {

      duration: 0.6,

      delay: 0.4,

      ease: Power4.easeOut,

    },

  });

 

 

 

 

// FIRST TIME PLAY ON PAGE REFRESH  

sliderplay(currentslide);

homepageslider.play();

 

function sliderplay(slide){

  console.log(homepageslider);

  currentslide = slide;

  console.log("Playing silde number", currentslide)

 

  gsap.set(".project-" + currentslide , {autoAlpha: 1})

  homepageslider

  .to(".project-" + currentslide + " .cover .frame.left-frame", {y: 0})

  .to(".project-" + currentslide + " .cover .frame.right-frame", {y: 0}, 0.2)

  .to(".project-" + currentslide + " .bg-frame", {opacity:1}, 0.4)

  .to(".project-" + currentslide + " .mask.mask-left", {y: "100%"}, 0.6)

  .to(".project-" + currentslide + " .mask.mask-right", {y: "-100%"}, 0.8)

  .to(".project-" + currentslide + " h3.heading", {y: 0}, 0.99)

 

 

 

}

 

$(".bottom-arrow").click(function(){

 

  currentslide += 1;

  console.log("Slide clicked", currentslide)

  homepageslider.reverse();

  homepageslider.eventCallback("onReverseComplete", checkreversecondition)

 

 

})

 

function checkreversecondition(){

  if(homepageslider.reversed()) {

    console.log("Yes timeline reversed");

    console.log("Now current slide is", currentslide);

    sliderplay(currentslide);

   

  }

 

}