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. :) 

:-) 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.

great ill look into it!

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! 

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!

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

+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 

In Camtasia, click Produce, under Custom you can export the movie as a GIF.

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.

Thank you Sam! I will give this a go. :)