Highlighted

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

Engaged ,
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.

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. 

Views

115

Likes

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

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

Engaged ,
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.

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. 

Views

116

Likes

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
Engaged ,
May 29, 2018

Copy link to clipboard

Copied

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. 

Likes

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
Reply
Loading...
Resources
Captivate User Guide
New Group