Setting Up GreenSock (GSAP) for RISE

Feb 01, 2021

Hello, I am curious if anyone has successfully added GreenSock (GSAP) for RISE and was able to get it to work?

 

My goal is to animate an SVG image using GSAP.  I know you can animate an SVG using SMIL in RISE but, I am trying to utilized the animation options from GSAP.

 

 I was able to get the svg and animation to work outside of RISE so,  I know the JavaScript code works.  My problem is understanding how to target the SVG?  I am using RISE's Image full width option to insert the SVG and that is where I am getting lost in the code.  If you can give me any suggestions...that would be awesome!

2 Replies
Math Notermans
Math Notermans

As you want to animate the SVG inside Rise..and not in Storyline... i do think the only option is...downloading a published Web or LMS format of the Rise course and then manually add GSAP code and animate your element. You can do tests in a browser version of your Rise course using the console. Also you can  add animated SVG into Rise...
Here you find some tests i did getting interactive animated SVG into Rise..
https://360.articulate.com/review/content/33063901-1793-4bf6-93e2-0aed60b3f906/review
Basically Rise only supports CSS animations in Rise and not Javascript.