• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Javascript and WAAPI to animate buttons - not working on iOS devices ??

Engaged ,
May 25, 2018 May 25, 2018

Copy link to clipboard

Copied

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.

Views

237

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , May 29, 2018 May 29, 2018

In case anyone stumbles upon the same issues. Turns out web animation API isn't supported by iOS devices? Or at least by Safari, but it isn't working on my iOS devices either even when using Chrome. 

 

So with some google help I found this piece of code - 

 

var isMobile = {

iOS: function(){

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

}

}

 

to detect if a user is on an Apple device. I put this code in an external .js file which I then link to my project.  Then on my slide with the quiz I added

...

Votes

Translate

Translate
Engaged ,
May 29, 2018 May 29, 2018

Copy link to clipboard

Copied

LATEST

In case anyone stumbles upon the same issues. Turns out web animation API isn't supported by iOS devices? Or at least by Safari, but it isn't working on my iOS devices either even when using Chrome. 

 

So with some google help I found this piece of code - 

 

var isMobile = {

iOS: function(){

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

}

}

 

to detect if a user is on an Apple device. I put this code in an external .js file which I then link to my project.  Then on my slide with the quiz I added - 

if(isMobile.ios()) f = true;

then created two new functions - one to simply hide and show my hidden object without the web animation part and one to tell my button which function to do depending on if the user is on an iOS device or not (either the function including the web animation or the function not including it). It looks like this - 

function instBtn_IOS(){

if (f==true){

cp.show('hidden');

f = false;

}  else {

cp.hide('hidden');

f = true;

}

}

 

function detection(v){

if (v.iOS()) {

instBtn_IOS();

} else {

instBtn();

}

}

 

Then on my button that I want to hide/show the hidden object I called the function detection(isMobile) and passed isMobile variable through it. 

 

This seems to be working so far. When testing on an iPhone the object hides/shows simply, but still when testing on an Android it animates like it is supposed to. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources