Javascript and WAAPI to animate buttons - not working on iOS devices ??
I'm working on a responsive Captivate project using breakpoints. I have included some buttons animations using Javascript and Web Animation API thanks to this awesome blog post - How to Animate Buttons (and lots of other cool Javascript stuff!) - eLearning
I've noticed however, that the animations are not showing up on iOS devices (tested on an iPhone 6 and iPad air 2). Which initially didn't bother me too much (the users are still getting all the information they need), except for one specific slide where I have an item show and hide along with the animation and on the iOS devices it will show properly, but won't hide again like it is supposed to. Any ideas on workarounds or why it's different on iOS?
My code is as follows, the on enter action of the slide includes:
cp.hide('hidden');
t = true;
var keyframes = [
{
transform: 'scale(0)',
transformOrigin: '0% 0%'
},
{
transform: 'scale(1)',
transformOrigin: '0% 0%'
}
];
var options =
{
delay: 0,
endDelay: 0,
duration: 500,
easing: 'ease-in-out',
}
var options2 =
{
delay: 0,
endDelay: 0,
direction: 'reverse',
duration: 500,
easing: 'ease-in-out',
}
function playAnim(f,g,e){
cp.enable(f);
g();
pAnim = e.animate(keyframes, options);
pAnim.play()
}
function playAnim2(e,f,g){
pAnim=e.animate(keyframes,options2);
pAnim.play()
pAnim.onfinish = function() {
cp.enable(f);
g();
}
}
function unHide(){
cp.show('hidden');
}
function Hide(){
cp.hide('hidden');
}
function instBtn(){
if(t == true){
playAnim('hidden',unHide,hiddenc)
cp.disable('hidden')
t = false;
} else {
playAnim2(hiddenc,'hidden',Hide)
cp.disable('hidden')
t = true;
}
}
Then on my instructions button I simply call the function intBtn();
It works perfectly when tested in google chrome on a desktop and on an androidd device (samsung edge).
Any advice is much appreciated!
Also - not sure if it matters but my 'hidden' object is a .png image. When I had it as a shape button with text, the shape would animate, but the text was static, so I replaced it with a .png.
AdChoices