15 Replies
Math Notermans

:-) Well tons of options there...

- in Storyline use the available options. Motion paths etc.
- external tools like AfterEffects and others. Create a gif or mp4 and import into SL
- use Javascript. GSAP is a great JS library with which you can do anything... check my posts for possibilities. GSAP is included in SL so you can animate from scratch.

In my opinion GSAP is the best option. Complete control and great options.

Sarah Hodge

Hi Pamela! Sorry for the late response. I used PowerPoint and Storyline to create the animation effects for those headers. I then previewed the screen and recorded them at the same time in Camtasia so I could perfectly start and end the animation. Then, I saved it as a GIF in Camtasia and uploaded the GIF image to my Rise 360 course. I hope that helps! 

Harry Carter

Hi Sarah,

Without question, your Dog Care Presentation is one of (if not the best) I've seen in Rise 360. Everything is crisp and clean, logical, easy on the eyes, engaging.

I often look at creations on here and though many are fun, they aren't the "style" that I feel would be appropriate for my students.

I did read that you used PP and SL and Camtasia. I have Camtasia but never realized that I could save recordings as GIFs.

Thank you!



Pamela Griffin

Thank Sarah, that looks a little simpler. I was actually trying to do the animation on power point then transfer the slide. The recording is much better.  However it's still not as great as yours.  

Is there any chance you can do a video on how you have created it? It's fresh, creative, attractive and can be using in various work sectors. I'm sure it would useful to many people. 

Have a lovely day, thanks

Dinomite LLC

Hey @Sarah Hodge... I have a lot of questions about how you were able to do this on the pages within the course, not necessarily the header of the entire course. Could you explain how to go through this process?

Ex: How big do you make the gif? What image block did you use? How did you get it to replace the very top Heading? Etc. 

Any help would be greatly appreciated! 



Sam Williamson

Hey Jes,

It looks like Sarah has used custom CSS to hide the standard page headers, then just put the GIFs in image blocks to act as a de facto headers.

That isn't something you can do within Rise itself, you need to edit the published files. It's relatively simple to do but more annoying than it should be, primarily as you'll need to make the change every time you republish.

First, unzip your downloaded project. Find index.html within the unzipped folder – depending on how you published, this might be at the top level of the folder or within scormcontent – and open it with a text editor of some kind; Notepad or similar is fine.

Within the <style> section of index.html, about 30 rows down, add the following line:

.page__header-container{display: none}

Save your changes.

Zip everything back up – making sure the folder hierarchy is the same as before – and your project will now hide the default headers.