I'm trying to use the rotation animation, but on iOS it sometimes works and sometimes it doesn't, probably due to the lack of webkit. How do I use webkit?

[marcus.neri]

my code for example is 

function abrirCard_2(alvo) {
    gsap.fromTo(alvo, 0.25, { rotationY: -270 }, { rotationY: -360, ease: Sine.easeOut });

    //$(alvo).find(".titulo .numero").addClass("hide");
    $(alvo).find(".botao_acessar").addClass("hide");
    $(alvo).find(".descricao").addClass("hide");
    alvo.querySelectorAll(".grupos").forEach(function (e) { e.classList.add("hide"); });
    var grupoAlvo = alvo.querySelector(".grupos[grupo_card='0']");
    grupoAlvo.classList.remove("hide");
    grupoAlvo.style.opacity = 1;
    gsap.set(grupoAlvo, { scale: 1 });
    $(alvo).find(".voltar_grupo").removeClass("hide");
    $(alvo).find(".fechar_card").removeClass("hide");
    //$(alvo).find(".rodape").css("display", "flex").css("justify-content", "center");
    $(alvo).find(".rodape").addClass("hide");
    $(alvo).find(".rodape_menu_avancar").removeClass("hide");

    aplicarMenuBolinha(that, grupoAlvo, navegacaoInicial);
    section_container.animando = false;
}

 

function fecharCard(alvo) {
                alvo.gruposAbertos = -1;

                gsap.fromTo(alvo.firstChild, 0.25, { rotationY: 0 }, {
                    rotationY: 90, ease: Sine.easeIn, onComplete: function () {
                        gsap.fromTo(this.targets()[0], 0.25, { rotationY: 270 }, { rotationY: 360, ease: Sine.easeOut });

                        //$(this.targets()[0]).find(".titulo .numero").removeClass("hide");
                        $(this.targets()[0]).find(".botao_acessar").removeClass("hide");
                        $(this.targets()[0]).find(".descricao").removeClass("hide");
                        $(this.targets()[0]).find(".grupos").addClass("hide");
                        $(this.targets()[0]).find(".voltar_grupo").addClass("hide");
                        $(this.targets()[0]).find(".fechar_card").addClass("hide");
                        //$(this.targets()[0]).find(".rodape").css("display", "inherit");
                        $(this.targets()[0]).find(".rodape").removeClass("hide");
                        $(this.targets()[0]).find(".rodape_menu_avancar").addClass("hide");

                        alvo.querySelector(".grupos_abertos").innerHTML = "";

                        //alvo.gruposAbertos = 0;
                    }
                });
                return;
            }

 

 

[ZachSaucier]

Hey Marcus and welcome to the GreenSock forums.

 

GSAP should add the relevant prefixes when necessary. Can you please create a minimal demo that shows the rotation issue on iOS sometimes? This thread talks more about how to do so:

 

I also noticed that you're using the old GSAP syntax. We highly recommend GSAP 3 and the new syntax. It's better and easy to upgrade!