Hello.
I'm new in the forum, and quite new to GSAP, too.
Recently, I put in production a website. In the home page is included a countdown animated with GSAP.
This is the link: http://www.progettoborgogni.it
It works great on PC and on mobile, but I found problems with an ipad. I really can't find the problem.
To solve, I tried to changed the libraries' relases with the newest I found, like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
But I can't see any difference: the error is still there.
The animation is quite simple, it is inside a JS function, with this method:
animateFigure: function (elem, value) {
let that = this,
top = elem.querySelectorAll('.top')[0],
bottom = elem.querySelectorAll('.bottom')[0],
backTop = elem.querySelectorAll('.top-back')[0],
backBottom = elem.querySelectorAll('.bottom-back')[0];
// Before we begin, change the back value
backTop.querySelectorAll('span')[0].innerText = value;
// Also change the back bottom value
backBottom.querySelectorAll('span')[0].innerText = value;
// Then animate
gsap.to(top, 0.8, {
rotationX: '-180deg',
transformPerspective: 300,
ease: Quart.easeOut,
onComplete: function () {
top.innerText = value;
bottom.innerText = value;
gsap.set(top, { rotationX: 0 });
},
});
gsap.to(backTop, 0.8, {
rotationX: 0,
transformPerspective: 300,
ease: Quart.easeOut,
clearProps: 'all',
});
},
Is there someone who's able to explain me what's going on?
Thanks in advance.