Setting Up GreenSock (GSAP) for RISE
Feb 01, 2021
By
Jason Dove
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
Using a Storyline block in Rise... yes
https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360
https://community.articulate.com/discussions/articulate-storyline/morphing-animation-in-storyline
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review
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.