Skip to main content
hayleyc14243818
hayleyc14243818
Participating Frequently
May 13, 2021
Answered

Spin an arrow using javascript

  • May 13, 2021
  • 1 reply
  • 2127 views

Hi, I'm a javascript/CSS beginner, using the Captivate 2019 updated software. I've been trying to build a version of this project https://elearning.adobe.com/2018/06/random-animated-spinner/ but am having trouble getting the arrow to spin using the 'animate' portion of the code in the example: 

arrowc.animate([
{
transform: ‘rotate(0deg)’,
transformOrigin: ‘center’,
},
{
transform: ‘rotate(‘ + (eRot) + ‘deg)’,
transformOrigin: ‘center’,
}
], {fill: ‘forwards’, easing: ‘cubic-bezier(0, 0, 0.10, 1)’, duration: 7000 }

 

Does anyone know how to make an object spin in Captivate 2019 (updated version) using the 'animate' function? The closest I've managed to come is to make the arrow 'appear' in different positions using this css code from another Community thread: 

$("#arrowc").css({transform: "rotate("+(eRot)+"deg)", transformOrigin: "left",})

 

Thanks in advance,

This topic has been closed for replies.
Correct answer Stagprime2687219

Personally, I am a big fan of the GreenSock library (GSAP) for making animation with JavaScript much simpler.

Using GSAP, you can pull this off with just two lines of code.

 

var spin = Math.floor(Math.random() * 360) + 2520;

gsap.fromTo("#arrowc", {rotate: 0}, {rotate: spin, duration: 3, overwrite: "auto"});

 

In the first line we grab a random number that is high enough to spin the arrow around several times before stopping. 

In the second line we rotate the arrow from a 0 position to the random value position. The spin lasts 3 seconds.

 

There was a little more stuff going on in Jeremy's post but that would be fairly easy to implement.

The only trick is that you would need to include the GSAP core - post-publish.

1 reply

Stagprime2687219
Stagprime2687219Correct answer
Legend
May 13, 2021

Personally, I am a big fan of the GreenSock library (GSAP) for making animation with JavaScript much simpler.

Using GSAP, you can pull this off with just two lines of code.

 

var spin = Math.floor(Math.random() * 360) + 2520;

gsap.fromTo("#arrowc", {rotate: 0}, {rotate: spin, duration: 3, overwrite: "auto"});

 

In the first line we grab a random number that is high enough to spin the arrow around several times before stopping. 

In the second line we rotate the arrow from a 0 position to the random value position. The spin lasts 3 seconds.

 

There was a little more stuff going on in Jeremy's post but that would be fairly easy to implement.

The only trick is that you would need to include the GSAP core - post-publish.

hayleyc14243818
hayleyc14243818Author
Participating Frequently
May 17, 2021

Thanks, this is very useful. Could you please explain/ link me to something that explains how to 'include the GSAP core post-publish'?

Stagprime2687219
Stagprime2687219
Legend
May 18, 2021

Here is one way you can do this.

After you publish - go ahead and open the published output folder. It should look similar to the following.

 

 

Number 1 - You should have a folder called  'assets'.  Go into that folder and look for another folder called  'js'

 

 

Go into that folder and then place a copy of the gsap library that you downloaded from their site.

 

 

Now go back  a couple of levels and look at number 2. This is the index.html file.

You will need to open this file with a text editor of your choice. Brackets or Notepad++ are good options.

It is easiest if you have one that will show you the line numbers.

 

 

Look for line number 142 that begins   var lJSFiles = ...

Add the text shown in purple to include the gsap library.

Save the document.

Launch your project and give it a test drive.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices