Could someone please kindly advise how to write a simple js code to move an object? Using the animation seems just too difficult. (eg: move and rotate a star that is already on the screen to another spot on the screen when user clicks button).
I think it should use Tweenlite.to and use the x,y positions but not sure how. It's probably only 3-4 lines of js but I can't seem to make it work.
Spent hours seeking on the internet but couldn't find this exact thing, although there's lots of other great info out there.
Indeed using the GSAP engine is simple, and when you want to use Javascript in Storyline its your best choice for animation. Especially because the latest version of GSAP is allready included in Storyline.
2 things you have to know and solve.
1) How do i select my element ? 2) How do i get the desired position ?
The rest then is easy. The answers to these 2 questions are as follows.
1) As in older version jQuery was in Storyline you could use that as selector. However that library has been removed from Storyline for quite a while, so you need to use a normal selector to get your element. Do learn all you can about selectors because in the long run with solid knowledge of them you can get to any element in HTML5 and thus in Storyline. https://www.w3schools.com/w3js/w3js_selectors.asp
When you dive into this you at some point will discover it is not easy to select elements onscreen in Storyline with the most common selectors. Mainly because SL's HTML doesnot give proper ID's or classes to elements. So you have to find another way to select your element.
And then mainly the accessibility name. To select a element onscreen this line will do the trick.
var element2Animate = document.querySelector("[data-acc-text='star.png']");
This now sets a variable 'element2Animate' to select the star.png element onscreen. You have to make sure your element has the proper acc-name. Imported images default have the source name. Do make sure you also understand the difference between querySelector and querySelectorAll and how to get to the different attributes if needed.
2) In Storyline the players act differently. That makes it tougher to get a proper x/y position for elements. So in the end there are several methods that work in both players. One is using the viewport width (vw) and viewport height (vh) values to overcome the responsive character of the modern player and get your element always to the correct position. The other is getting the x/y position of another object onscreen and use that as reference for your x/y. The latter im not gonna show here because its more complex. If needed and wanted i explain that separately. In fact you probably can find more info on that in some of my other posts...including samples.
Gsap offers quite some options for animating an element.
gsap.to(element2Animate, {duration:2,x:"+=150"}); The line above animates the element in 2 seconds 150 pixels to the right of its original position.
gsap.to(element2Animate, {duration:2,x:150,y:100}); The line above animates the element in 2 seconds to the given position. Keep in mind that this will be not accurate due to the responsive player. In the classic player this works fine..in the Modern player you will get undesired results when changing the size of your browser.
gsap.set(element2Animate, {x:150,y:100}); Set directly sets an element to a given position
gsap.fromTo(element2Animate, {x:0,y:0},{duration:2,x:200,y:200}); fromTo animates an element from a position to a position.
gsap.to(element2Animate, {duration:2,x:"35vw", y:"65vw"}); The line above animates the element in 2 seconds to a relative viewport position.
gsap.to(element2Animate , {duration:0.5,x:"+=25",y:"+=25",rotation:"+=8",ease: "Power1.Out"}); Adding rotation and a ease now is simple.
Hey and thanks so so much for your prompt and comprehensive response.
I, of course, have not gone through it all in depth, which I fully intend
to do, but just had one quick question if that's ok.
Can this work with SL objects - ie just inserting an object such as a
rectangle, oval or star from within SL, or it can only work with just
imported images such as .png images?
Thanks so much. Probably more questions will arise as I read on.
Daniel.
Downloaded YOUR file HowtoMoveMe.story and published it but nothing happens there either. I'm obviously missing something very fundamental. I opened it with Chrome.
As it works on my end in Storyline360, this could be a difference between Storyline3 and 360.. Is no good if thats the case, but it is good to know. Adding a video showing you how to use the console to test what version of Gsap is included in Storyline3. Wouldnot surprise me if Storyline3 still uses the old TweenLite version. Do let me know.
And a answer to SL objects...shapes etc...yes this also works with those...check my posts on SVG, GSAP and Javascript. Selectors are somewhat more complicated for SVG objects.
Although I have not found any information about GSAP and Storyline 3, I'm beginning to strongly suspect that Storyline 3 does not support GSAP, although the 360 version obviously does. That's unfortunate and highly disappointing since I can hardly afford SL360.
Could I add some script to make my SL3 version work with GSAP?
Yes, you can use a WebObject to add GSAP...also Storyline3 probably supports TweenLite the older version of GSAP ( 2014 or so )..if you check my posts you probably find several references to TweenLite and how to work with that. Alas i dont have Storyline3 and cannot help further...
Please correct me if I'm wrong, but it seems WebObject just embeds websites to the project. Not sure how, as you mentioned, to 'use a WebObject to add GSAP'.
So could a staff member please please kindly confirm that SL3 does not support GSAP? And is there a way to add GSAP functionality to an SL3 file possibly using html or js code?
Thanks for all your help. I FINALLY managed to get it to work!
I added the GSAP html initialize code line in the storyline html5 file by editing it in Visual Studio Code. Took me a while! I forced Storyline 3 to recognize GSAP against its will!
Now I can start playing with it and learning.
Thanks again for all your help....it's a learning curve!
11 Replies
Indeed using the GSAP engine is simple, and when you want to use Javascript in Storyline its your best choice for animation. Especially because the latest version of GSAP is allready included in Storyline.
2 things you have to know and solve.
1) How do i select my element ?
2) How do i get the desired position ?
The rest then is easy. The answers to these 2 questions are as follows.
1) As in older version jQuery was in Storyline you could use that as selector. However that library has been removed from Storyline for quite a while, so you need to use a normal selector to get your element. Do learn all you can about selectors because in the long run with solid knowledge of them you can get to any element in HTML5 and thus in Storyline.
https://www.w3schools.com/w3js/w3js_selectors.asp
When you dive into this you at some point will discover it is not easy to select elements onscreen in Storyline with the most common selectors. Mainly because SL's HTML doesnot give proper ID's or classes to elements. So you have to find another way to select your element.
So at some point you will discover that the easiest way to select most elements on your page is using their attributes.
https://www.w3schools.com/css/css_attribute_selectors.asp
And then mainly the accessibility name. To select a element onscreen this line will do the trick.
var element2Animate = document.querySelector("[data-acc-text='star.png']");This now sets a variable 'element2Animate' to select the star.png element onscreen. You have to make sure your element has the proper acc-name. Imported images default have the source name. Do make sure you also understand the difference between querySelector and querySelectorAll and how to get to the different attributes if needed.
2) In Storyline the players act differently. That makes it tougher to get a proper x/y position for elements. So in the end there are several methods that work in both players. One is using the viewport width (vw) and viewport height (vh) values to overcome the responsive character of the modern player and get your element always to the correct position. The other is getting the x/y position of another object onscreen and use that as reference for your x/y. The latter im not gonna show here because its more complex. If needed and wanted i explain that separately. In fact you probably can find more info on that in some of my other posts...including samples.
Gsap offers quite some options for animating an element.
gsap.to(element2Animate, {duration:2,x:"+=150"});The line above animates the element in 2 seconds 150 pixels to the right of its original position.
gsap.to(element2Animate, {duration:2,x:150,y:100});The line above animates the element in 2 seconds to the given position.
Keep in mind that this will be not accurate due to the responsive player. In the classic player this works fine..in the Modern player you will get undesired results when changing the size of your browser.
gsap.set(element2Animate, {x:150,y:100});Set directly sets an element to a given position
gsap.fromTo(element2Animate, {x:0,y:0},{duration:2,x:200,y:200});
fromTo animates an element from a position to a position.
gsap.to(element2Animate, {duration:2,x:"35vw", y:"65vw"});The line above animates the element in 2 seconds to a relative viewport position.
gsap.to(element2Animate , {duration:0.5,x:"+=25",y:"+=25",rotation:"+=8",ease: "Power1.Out"});Adding rotation and a ease now is simple.
Added a sample.
Hey and thanks so so much for your prompt and comprehensive response.
I, of course, have not gone through it all in depth, which I fully intend
to do, but just had one quick question if that's ok.
Can this work with SL objects - ie just inserting an object such as a
rectangle, oval or star from within SL, or it can only work with just
imported images such as .png images?
Thanks so much. Probably more questions will arise as I read on.
Daniel.
Hi again and sorry for the trouble. I MUST get to the bottom of this. Hope
that's ok!
So I added these two lines to the javascript and assigned it to a button. I
downloaded an image called 'splash.png' and inserted it in SL3.
The javascript lines:
var element2Animate =
document.querySelector("[data-acc-text='splash.png']");
gsap.to(element2Animate, {duration:2,x:"+=200"});
ALAS, nothing happened. So what am I still missing?
Thanks again,
Daniel.
Hi again.
Downloaded YOUR file HowtoMoveMe.story and published it but nothing happens there either. I'm obviously missing something very fundamental. I opened it with Chrome.
let me doublecheck my file myself... As this was Storyline360 im not 100% sure what are the differences for this kind of thing in Storyline3...
As it works on my end in Storyline360, this could be a difference between Storyline3 and 360.. Is no good if thats the case, but it is good to know.
Adding a video showing you how to use the console to test what version of Gsap is included in Storyline3. Wouldnot surprise me if Storyline3 still uses the old TweenLite version. Do let me know.
And a answer to SL objects...shapes etc...yes this also works with those...check my posts on SVG, GSAP and Javascript. Selectors are somewhat more complicated for SVG objects.
Thanks for that.
Although I have not found any information about GSAP and Storyline 3, I'm beginning to strongly suspect that Storyline 3 does not support GSAP, although the 360 version obviously does. That's unfortunate and highly disappointing since I can hardly afford SL360.
Could I add some script to make my SL3 version work with GSAP?
Thanks,
Daniel.
Yes, you can use a WebObject to add GSAP...also Storyline3 probably supports TweenLite the older version of GSAP ( 2014 or so )..if you check my posts you probably find several references to TweenLite and how to work with that. Alas i dont have Storyline3 and cannot help further...
Thanks for your help anyway, sir.
Please correct me if I'm wrong, but it seems WebObject just embeds websites to the project. Not sure how, as you mentioned, to 'use a WebObject to add GSAP'.
But is there a way to,say, add a line of html to the project? If so, I could type in:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> to get the GSAP functionality embedded in the project.
So could a staff member please please kindly confirm that SL3 does not support GSAP? And is there a way to add GSAP functionality to an SL3 file possibly using html or js code?
Thanks again,
Daniel.
Hi Math!
Thanks for all your help. I FINALLY managed to get it to work!
I added the GSAP html initialize code line in the storyline html5 file by editing it in Visual Studio Code. Took me a while! I forced Storyline 3 to recognize GSAP against its will!
Now I can start playing with it and learning.
Thanks again for all your help....it's a learning curve!
D.