How to Animate Buttons (and lots of other cool Javascript stuff!)

January 9, 2018
Master 18 posts
Followers: 28 people
25

How to Animate Buttons (and lots of other cool Javascript stuff!)

Master 18 posts
Followers: 28 people
January 9, 2018

Preamble

Something that I noticed with Captivate’s built in effects is that you cannot (or at least it is challenging) animate buttons.  In other words, a user clicks on a button, that button animates, and at the end of the animation, it fires off a function or advanced action. There might (or might not be) ways of doing this with invisible buttons, objects, and effects but this is one method.

Please note that if you are very uncomfortable using javascript, or absolutely hate any kind of programming this might not be ideal for you.  This blog is also LONG because I wanted to explain as much as I could at a beginner level.  I hope it will be useful.  In addition, I have posted some helpful links and the .cptx file at the bottom of this blog.

Step 1: Find and modify your cool animation

Head over to http://animista.net/play and find your perfect animation. Copy and then modify the code to your liking.  I modified the ‘wiggle’ animation and put it into the Web Animation API (WAAPI) format.

The animation script I used created was:

var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

All of this script goes into the slide’s on ‘enter slide execute javascript’.

A few notes about this animation script.  There are two variables: ‘options’ and ‘keyframes’.  ‘Keyframes’ basically specifies WHERE the object will move – like x and y position and rotation.  The ‘Options’ variable states HOW the object will move, like timing and repetitions.  If you copy and paste any .css animation code, just make sure it is exactly in the correct format.

 

Step 2: Create Your Buttons

For this example I created 3 buttons. Just basic smart shapes converted into buttons. I turn off ‘continue playing the project’, the clicking noise, and delete the ‘rollover’, and ‘down’ states. Each button will have it’s own function but the same applied animation.

I gave my buttons the ID ‘btn’, ‘btn1’, and ‘btn2’.

Oh – I also created a second slide with a button going back to the first slide.

Step 3: Create Your Buttons Functions

I don’t want to go into too much in detail about javascript functions, but essentially I want each button to ‘do’ something different.  If you really hate javascript you could always create advanced actions on a button and call them through javascript (that’s for another blog).  I’ll run through each function here briefly:

All of these function also go into the

Function 1:

function nextSlide(){
window.cpAPIInterface.next();
}

The function is titled ‘nextSlide’. It uses the captivate API interface to jump to the next slide.

Function 2:

function message(){
alert(“You pressed the Message Button”)
}

The function is titled ‘message’. When the function is called it creates an alert message with the “You pressed the Message Button” text.

Function 3:

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

Ok this one is a bit trickier but it still uses some of Captivate’s built in function.  The function is titled ‘unHide’. When called it toggles the variable ‘t’ (which I’ll mention later) from ‘true’ to ‘false’. In other words, if ‘t’ initially equals ‘true’, the “t =!t” toggles ‘t’ to equal ‘false’.  Then it checks if t == true (the double ‘==’ means ‘is it equal to’. If ‘t’ is true it will “cp.show(‘hidden’) which means it will show an object I have given the ID name  ‘hidden’.  If ‘t’ is not equal to true “else” it will hide the object with the ID ‘hidden’

Step 4: Create the Animation Function

Here is the function that will trigger the animation. This also goes into the ‘enter slide execute javascript’ window.

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

This one gets really complicated if you are a beginner at functions but I believe in you .  The function is titled ‘playAnim’ and it ‘passes through’ three bits of information ‘e’, ‘f’, and ‘g’.  I declare what those bits of information are when I ‘call’ (ask to start) the function.

pAnim = e.animate(keyframes, options);  This creates a new variable titled pAnim.  It states that whatever bit of information ‘e’ is, it will create an animation (.animate) ‘e’ with the ‘keyframe’ and ‘options’ variables.

pAnim.play() starts the animation

pAnim.onfinish = function(){   This means that when pAnim finishes it’s animation it will call a new function which is titled function and does…

cp.enable(f);  The function enables whatever bit of information ‘f’ is and…

g();   Launch whatever bit of information ‘g’ is.

 

Step 5: Program your buttons

Now you need to execute javascript for each button. But because we did all the work on ‘on enter frame execute javascript’ window, the rest is easy.

For button 1, I put this code in and that’s it.

playAnim(btnc,’btn’,nextSlide)

cp.disable(‘btn’)

playAnim(btnc,’btn’,nextSlide)    This is calling the function playAnim (the one that had e,g, and f)  If you look at that code you can replace ‘e’ with ‘btnc’, f with ‘btn’ and ‘g’ with ‘nextSlide’ to see how it all works.

You might be asking what is ‘btnc’.  If you ever want to animate something in Captivate, just add a ‘c’ to the end of the ID and it should work.  That could be a discussion for next time.

So playAnim(btnc,’btn’,nextSlide)  will essentially animate ‘btnc’, will enable ‘btn’ and will call the function ‘nextSlide’ when the animation ends.

The second line of the code: cp.disable(‘btn’) tells Captivate to disable the button.  It’s annoying if a user can click a button multiple times before the animation ends and it looks bad.  That’s why it nice to disable the button, play the whole animation, and then re-enable the button.

For button 2, the code is this:

playAnim(btn1c,’btn1′,message)

cp.disable(‘btn1’)

 

And button 3, it is this:

playAnim(btn2c,’btn2′,unHide)

cp.disable(‘btn2’)

 

Step 6: Add the ‘t’ Variable

Add the top of the execute on enter frame script add:

t = true;

This will declare the variable ‘t’ as true and will alternate when the toggle function is called.

_____________________________

 

That is all.  I hope that you find some or all of this useful.  All the best,

Jeremy

 

All the Execute on Enter Frame Code (in one place)

t = false
var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

function nextSlide(){
window.cpAPIInterface.next();
}
function message(){
alert(“You pressed the Message Button”)
}

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

 

Useful WAAPI Animation Sites

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts

https://css-tricks.com/css-animations-vs-web-animations-api/

 

The .cptx file

animateBtns

Comments (25)
2018-10-03 17:18:20
2018-10-03 17:18:20

(if this is a repost, i apologize. When i hit “post”, nothing happened. )
great article! but The example you used from Animista doesn’t cover animation origin.
How would I set the transform origin? like if I wanted an object to scale in from the top-left , or bottom right, depending on certain criteria.

Like
2018-10-03 16:49:05
2018-10-03 16:49:05

Love the article. Just what the dr ordered. I do have a question, however . I’m a little lost on step 1 for how to translate animations with multiple aspects; in the example below, they have scale, transform origin, and opacity
e.g.
@keyframes scale-in-tl {
0% {
transform: scale(0);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
transform: scale(1);
transform-origin: 0% 0%;
opacity: 1;
}
}

Like
2018-06-07 18:56:38
2018-06-07 18:56:38

Thank you fot the answer.

Like
(1)
2018-06-06 20:36:45
2018-06-06 20:36:45

Oh, one more question. I read you linked to (css.tricks.com) and I’m still wondering if converting CSS format to WAAPI is as simple as changing the syntax? I’m just trying to make sure …

Like
(1)
(1)
>
Piotr Astramowicz
's comment
2018-06-07 12:29:04
2018-06-07 12:29:04
>
Piotr Astramowicz
's comment

It looks that way. I haven’t found any features styles that can’t be transferable.

Like
(1)
2018-06-06 20:35:50
2018-06-06 20:35:50

Oh, one more question. I read you linked to (css.tricks.com) and I’m still wondering if converting css format to WAAPI is as simple as changing the syntax ? I’m just trying to make sure …

Like
(1)
2018-05-22 20:16:29
2018-05-22 20:16:29

Coming back to this thread again, so much useful information here. I’ve gotten better at animating my buttons with this method – however I’m wondering if there is a way to apply animations like as a hover effect? I’ve tried adding functions via ‘mouseover’ or ‘mouseenter’ but neither seem to be working.

Like
(1)
(2)
>
keelym35886708
's comment
2018-05-25 17:59:01
2018-05-25 17:59:01
>
keelym35886708
's comment

I’m going to be creating a post on using css soon. It’s probably the easiest way to create a hover over effect.

Like
(1)
>
Jeremy Shimmerman
's comment
2018-05-27 19:29:13
2018-05-27 19:29:13
>
Jeremy Shimmerman
's comment

Can’t wait 🙂

Like
(1)
2018-05-16 12:52:34
2018-05-16 12:52:34

Thank you for the article. I have some basic knowledge of javascript. Just enough to use what you’ve written 🙂

Like
(1)
2018-05-15 20:49:18
2018-05-15 20:49:18

Woow amazing article. I need to dive in javscript more and more. At times is disheartening but it’s really valuable

Like
(1)
2018-05-15 15:27:26
2018-05-15 15:27:26

This is great. Thanks for sharing!

Like
(1)
2018-01-17 21:35:28
2018-01-17 21:35:28

If it were about advanced actions, I would tell to group the items to show/hide. I suppose you can address a group as well in JS.

Like
(1)
(2)
>
Lieve Weymeis
's comment
2018-01-17 21:41:10
2018-01-17 21:41:10
>
Lieve Weymeis
's comment

I did not think about grouping them! I tried that and then putting the name of the group in the function, but it seems to break all the code 🙁

Like
(1)
>
keelym35886708
's comment
2018-01-17 21:42:13
2018-01-17 21:42:13
>
keelym35886708
's comment

Sorry, you’ll have to wait for a JS expert… I never use JS for hide/show myself. Another idea is the use of the CpExtra widget by InfoSemantics.

Like
(1)
2018-01-11 23:38:53
2018-01-11 23:38:53

This is amazing!! I’ve been looking for ways to do something like this for a while. I’m fairly new to javascript, so this is a little over my head, but I’m still learning!! Thank you so much for sharing.

Do you happen to know anything about if there is a way to do this, but using custom made animations in After Effects and exporting them to .json files with the bodymovin plugin? Like I said, I’m new to javascript/code so I have no clue if there’s a way to do this, but it would be great if I could make custom button images in Illustrator, animate those shapes in After Effects, then apply the animations in this way.

Like
(1)
(5)
>
keelym35886708
's comment
2018-01-12 13:38:01
2018-01-12 13:38:01
>
keelym35886708
's comment

Thanks. I looked for a few things about the After Effects to .css animation. It doesn’t look like a perfect workflow transition (as in copy this code and paste it into your project). It looks like it stores the keyframes and data in a json file and then you would need to export it using the bodymovin plugin and then import it into your project using the bodymovin.js library. There are a few videos on how to do it and a couple articles about the pros and cons. I posted a few links that.
Personally, if it was a fairly straight forward animation (like a simple button movement, or transition effect) I would probably just ‘hard-code’ it straight in because its an easier workflow.

https://css-tricks.com/comparison-animation-technologies/
https://www.youtube.com/watch?v=5XMUJdjI0L8
http://lesterbanks.com/2016/04/bodymovin-after-effects-html5/
https://www.smashingmagazine.com/2017/12/after-effects-css-transitions-keyframes/

Like
(1)
>
Jeremy Shimmerman
's comment
2018-01-17 21:33:59
2018-01-17 21:33:59
>
Jeremy Shimmerman
's comment

Thanks for all the info!

I’m trying to implement some of this information into a current project and am wondering is there a way to use a function to hide/show multiple items at the same time? I tried adding another cp.hide(‘hiddenname’) line into the function and it seemed to break all the code. Then I tried putting the objects on one line like – cp.hide(‘hidden’,’hiddentwo’) and that seems to still just hide the first object listed.

Like
(1)
>
keelym35886708
's comment
2018-01-17 22:32:15
2018-01-17 22:32:15
>
keelym35886708
's comment

You could create a looping function that hides a specified number of multiple objects. It would probably be a bit overkill though.

You can definitely add more cp.hide(‘obj’). If it’s giving you trouble, test it in your browser and press F12. If any errors come up like ‘unexpected symbol’ it means you left out a bracket or apostrophe somewhere. If you want send me your code and I can take a look tomorrow.

Like
(1)
>
Jeremy Shimmerman
's comment
2018-01-17 22:40:09
2018-01-17 22:40:09
>
Jeremy Shimmerman
's comment

Yep, looks like I must have had a typo – seems to be working now with multiple cp.hide(‘obj’) lines!

Thank you so much!

Like
(1)
>
Jeremy Shimmerman
's comment
2018-07-05 02:03:02
2018-07-05 02:03:02
>
Jeremy Shimmerman
's comment

Thank you for sharing the expertise and the additional information in the replies! You started from the foundation and worked your way up so I was able to follow. Thank you again Jeremy!

Like
2018-01-11 05:40:04
2018-01-11 05:40:04

Great post! Thanks for sharing.

Like
(1)
2018-01-10 14:13:22
2018-01-10 14:13:22

Great stuff. So glad to see that this community is moving beyond what the tool provides out of the box. Really hope that Cp 2018 is more script-friendly, with features like managing external .js files so they get loaded, a better editor within Captivate (or at least a “roundtripping” feature to open an external editor, etc.

Like
(2)
(1)
>
eLearning Guy
's comment
2018-01-11 15:19:29
2018-01-11 15:19:29
>
eLearning Guy
's comment

Thanks. Having a better script editor would be great. I hate having to cut and paste. Even if they made one that just had an adjustable sized window.

Like
(1)
2018-01-10 09:40:17
2018-01-10 09:40:17

I’m looking to learn javascript this year, so this is timely for me (maybe a bit much to chew off, just now!) but a great post, thanks.

Like
(1)
Add your comment