Advanced Effects/Animations 3rd party CSS animations

[SeanKern]

I am running Captivate 9 and I am interested in adding advanced effects (animations) to text and other elements in a captivate project.

I want to achieve similar effect associated with Google's Material Design that Google calls "Authentic Motion". Authentic motion - Animation - Google design guidelines

2 part question

• I know popular CSS animations can be added with CSS using: Animate.css Is there anyway to integrate these CSS animations into the captivate interface?

• Here is the type of Authentic Motion animations I hope to eventually achieve. http://www.materialup.com/posts/material-design-animations What would the best way to achieve these type of animations in captivate?
  • Dribbble - Google's Material Design Animation by Balraj Chana   ‌Beautiful example!

[Lilybiri]

You could create this in Edge Animate (or Flash, soon to be named Animate CC), export as OAM and import in Captivate.

I just wonder if this is improving a learning experience that much? Captivate is an eLearning tool or has it changed?

[SeanKern]

As an instructional designer/developer new to the field (Graduated with a Master's of Instructional Technology in December) I believe it will.

Here is my logic, if motivation is one of the biggest factors to instructional design I must create an environment that motivates the learner to learn. To do this I need to create something that learners will have a positive experience using. This boils down to User Interface (UI).

Learners, especially the younger generation, expect current designs. I for one (23 years old) much prefer a UI with material or flat design to older looking ones. This is a trend that has been supported by major corporations such as Microsoft and Google. I think this very much applies to the elearning space because I want to design something the learners "want to use" just as Google design's apps users "want to use".

A great example would be https://polymer-topeka.appspot.com/ if you interact with this elearning interface you just simply, "want to use it". Yes this app has leaderboards and other motivators, however the UI is just phenomenal. This is the type of UI I want to create for my learners.

[RodWard]

Sean,

While I also applaud what Google and other very generous companies have done with HTML5, I would caution against confusing DESIGN with FASHIONS.

Just as the clothing world's trends wax and wane according to what is 'deemed' to be popular and 'the right thing to wear', the IT world also falls prey to similar fashion fads.

The fact that something animates on screen doesn't necessarily mean it is more engaging or will achieve higher rates of learning.  As many people found with PowerPoint when it first came out, that fact that you CAN animate something doesn't necessarily mean you SHOULD.  And sometimes these effects that people believe will be enjoyed by their target audience only turn out to annoy them.

You need to test your designs, with ALL segments of your target audience, not just the ones that happen to agree with you.

[Lilybiri]

'New to the field' explains a lot. I'm sorry to say so but at my age I think my experience allows me to say that a degree is not proving anything. I have met a lot of people with a PhD that I qualify as being 'stupid'. This is not meant at you at all, but if you want some facts:

• Will not offer you a list with all my degrees in different specialties, from civil engineering over musician degrees, add some pedagogical degrees and lot of certifications and awards.
• I have experience with training and teaching on many levels: from kids (for flute playing), over college students (you know perhaps that there is a significant difference between the college levels in some European countries like Belgium and those in the USA?) to adults (training of employees in building companies, of highly skilled immigrants to give them more possibilities to find a job). All included the use of ICT: used presentation applications before PPT appeared, used flipped classrooms before the word was invented.
• As head of department(s) in the university college I stimulated the use of blended learning and introduced a LMS. The certification commission (very strict here - establishes quality of each degree) awarded us as 'being an example for the whole country of the use of innovative techniques in the learning process'.
• My college students were excited to participate in my experiments with blended learning and social media, and not afraid of launching critical comments. Now you'll understand (perhaps) what I wrote before: "....is this improving the learning experience that much?". Offering good quality audio (VO) is a lot more important than fancy animations that are more distracting, just cost time and money and don't improve the learning experience.

[SeanKern]

I was conceding that I was new to the field, fresh out of school, not trying to state my credentials.

I appreciate the advice and take it to heart.

Back to my original question, I guess I should have mentioned that I am building a template so I am solely focused on on UI/UE at this time. The UI I am trying to achieve is a Material Design with "Authentic Motion".

My only question is:

Is there any way to integrate a 3rd party CSS and apply its class/ID tags to the elements in a Captivate project?