May 28, 2018
Mouseover Animations and more…
Comments
(2)
May 28, 2018
Mouseover Animations and more…
Newbie 18 posts
Followers: 44 people
(2)

It’s easy to have Captivate change the state of an object on a mouseover, but have you ever wanted to have an animation?  Here’s how you can using javascript and css.   In the sample file:

animations 

I have created 4 different animations for 4 different types of objects: Shape, button, textbox, and image.  I will explain here how to just do one. 

 

Step 1: Create your object on your slide.  

Create any type of object and give it the id ‘obj1’

Step 2: Create your ‘mouseover’ event listener

On enter frame put in the following javascript:

window.addEventListener(“mouseover”, function(e) {
if(e.target.id == “obj1”) {

}

This creates a mouseover listener. If the mouseover target is equal to “obj1” it will trigger an action.  

Step 3: Create your Animation Effect

Add the following lines to the javascript

if(e.target.id == “obj1”) {

document.getElementById(“obj1c”).style.transition = “all .5s”;
document.getElementById(“obj1c”).style.WebkitTransition = “all .5s”;
document.getElementById(“obj1c”).style.opacity = .2;
};

});

The style.transition and style.WebkitTransition (for Safari) sets the duration of the transition.  Not including these lines would result in the transition happening instantly. Note that you need to add a ‘c’ to your object.   

The style.opacity sets the new opacity to .2.  In other words opacity will transition from 1 to .2 in .5 seconds.  

Step 3: Add your ‘mouseout’ event listener

Add a mouseout event to your obj with the following code:

window.addEventListener(“mouseout”, function(e) {

if(e.target.id == “obj1”) {
document.getElementById(“obj1c”).style.opacity = 1;
};

});

This sets the opacity back to 1 when the mouse leaves the object.  Note that you do not need to add the transition timing because it was created on the mouseover event. 

All the Javascript together:

window.addEventListener(“mouseover”, function(e) {
if(e.target.id == “obj1”) {

document.getElementById(“obj1c”).style.transition = “all .5s”;
document.getElementById(“obj1c”).style.WebkitTransition = “all .5s”;
document.getElementById(“obj1c”).style.opacity = .2;
};

});

window.addEventListener(“mouseout”, function(e) {

if(e.target.id == “obj1”) {
document.getElementById(“obj1c”).style.opacity = 1;
};

});

  • Additional Notes
  • There are many transitions and effects you can add such as rotation, scale, background-color, and x or y movements.  This method also allows you to trigger other functions, show or hide objects, enable buttons, etc. 
  • For some reason adding transition times (i.e. style.transition = “all .5s) to text captions or images outside a mouseover event causes them to trigger a Captivate entrance animation.  That’s why I added the transition times inside the mouseover event.  If you are just using buttons or shapes you could dynamically add the transition times with the following script:

var a= document.querySelectorAll(“[id^=’obj’]”), i;

for (i = 0; i < a.length; ++i) {

  a[i].style.style.transition = “all .5s”;

  a[i].style.style.WebkitTransition = “all .5s”;

}

Hope you enjoy and feel free to ask any questions.  

2 Comments
2019-04-29 11:16:49
2019-04-29 11:16:49

Hi Jeremy,

Thanks for this blog and the example project. Really helpful !

 

 

 

Like
(1)
2018-05-31 17:31:06
2018-05-31 17:31:06

Thanks so much for sharing this Jeremy! I was recently trying to get mouseover and mouseout animations to work with my Captivate buttons and couldn’t figure it out, so this is great! In the meantime I made my buttons in Animate and used the GSAP library to animate them then put them in CP as an .oam file – but this is wonderful to be able to make animations happen directly in Captivate and I will definitely be utilizing this!

Like
(2)
Add Comment