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:
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.
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!
You must be logged in to post a comment.