Animation in Rise 360

Checking the course with the browser inspector you immediately can see its pure looping gifs.

Showing how to use the inspector to get the gif animation(s) and how to insert them into Rise360

Thanks Math. I am however trying to see how to create an animation. Example, downloading a car pic and moving it from point A to Point B. or as the presentation, a dog hiding in the bin. :) 

great ill look into it!

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!

+1 on this request.  I too would love to see a recording Sarah (or Pam) on how you achieved this in Power Point.  I don't have Camtasia.  Agree that this sort of animation could make any type of training more attractive.  

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! 

Thanks, 

--Jes 

Im no fan of Powerpoint for this, but it for sure is easy to work with.

Hi There, I know how to make a gif and I know how to change the cover photo. I'm speaking towards when you start each lesson she has a gif for the header and I don't know exactly how to do that. 

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.