Disabling 'Slide Transition' on Course Presentation

Submitted by tansohal on Fri, 03/18/2022 - 15:37
Forums: 
General discussion

Hey everyone,

 

Is there a way to disable the animation of slide transitions from one slide to another on the course presentation? 

Content types: 
Course Presentation
BV52's picture

BV52

Fri, 03/18/2022 - 17:24

Hi tansohal,

I'm afraid this is not possible not without making changes to the code.

=BV

tansohal

Fri, 03/18/2022 - 17:40

Please I'd love a lesson to do this, I just want it done lol! Has anyone done this before?

otacke's picture

otacke

Fri, 03/18/2022 - 19:54

Hi tansohal!

This can be done by overriding the `h5p-animate` class for the slides if you don't want to patch the original code, but this will affect all course presentation contents on the platform that you're running H5P on.

It would be very simple to add a "non slide" effect option to Course Presentation that allows to change the transition behavior. However, given that I have many pull requests pending that the H5P core team cannot handle, becaue they still don't have enough resources, I refrain a little form investing the time for a coding the feature that may be on a to-do pile for ages.

Best,
Oliver

tansohal

Fri, 03/18/2022 - 20:32

Hey!

Thanks for the suggestion, if I were to add an override CSS to my moodle website, what roughly would the could entail? I just want to remove the slide transition anitmation in whatever way possible. H5P has been a lovely discovery, and I'm trying to create a really great interactive expierence however, I'd love for someone to show me excatly how to remove the animation etc. 

tansohal

Fri, 03/18/2022 - 20:50

Hey not sure if my earlier mesage went through:

Could you let me know what to do with the actual code of:

.h5p-course-presentation .h5p-slide.h5p-animate { display: block; -webkit-transition: -webkit-transform 0.25s ease-in-out; -moz-transition: -moz-transform 0.25s ease-in-out; -ms-transition: -ms-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; }
otacke's picture

otacke

Fri, 03/18/2022 - 23:21

I am terribly sorry, but I can only show you the way. I don't have the free time to show everyone how to solve their problems.

tansohal

Sat, 03/19/2022 - 01:12

Can anyone spare some time to write out exactly how to do this? I'm willing to compensate for your time, I'm really deseperate to get this slide animation removed. 

Thanks,

Tan S.

lstringer

Fri, 04/08/2022 - 19:00

Try publishing your content as html. Open the html page in a text editor and replace ".25s" with "0s" - then save as html. This will remove the transition from your published content.

lstringer

Fri, 04/08/2022 - 19:00

Try this - publish your content as html. Open the html page in a text editor and replace ".25s" with "0s" - then save as html. This will remove the transition from your published content.

Ethan Duffy

Fri, 05/03/2024 - 13:51

This was a good suggestion, and now we've enabled downloads of H5Ps on our LMS, I edited the H5P.CoursePresentation-1.24\dist\h5p-course-presentation.css file to:

h5p-course-presentation .h5p-slide.h5p-animate{display:block;-webkit-transition:-webkit-transform 0s ease-in-out;-moz-transition:-moz-transform 0s ease-in-out;-ms-transition:-ms-transform 0s ease-in-out;transition:transform 0s ease-in-out}

Re-zipped the file and uploaded, and unfortunately it's added the transitions length back in. Re-downloading the package confirms this.

Dagwin

Sat, 12/03/2022 - 13:26

Hi,
did you succeed in removing the slide transition?
I want to do exactly the same thing.
It is a very easy way to simulate something.
For example 
On slide 1 put a red circle
On slide 2 put a green circle
On slide 1 put a goto slide 2 field above the circle 
On slide 2 put a goto slide 1 field above the circle.
Now you can toggle between red en green 
Only the slide in ruins the effect.

 

Ethan Duffy

Mon, 04/08/2024 - 15:05

This would be really useful for slides where either it's a software simulation, so you have the same UI between slides, or anything with a sort of before/after feel.

I can't edit HTML on the implementation of H5P on the learning platform that we use, but of course I'm looking into that as well. 

otacke's picture

otacke

Fri, 05/03/2024 - 19:49

Any update of the Course Presentation content type will overwrite your changes. If you require permanent CSS overrides, you need to use your plugin's hooks (https://h5p.org/documentation/for-developers/visual-changes).

Ethan Duffy

Mon, 05/06/2024 - 11:24

The LMS we use (Eurekos) doesn't offer that access, and upon uploading an H5P file, it gets opened in the editor straight away, with no way to bypass it. If the LMS did have that functionality though, it might not be an ideal solution, as presumably adding these mods or hooks would change all H5P modules using this content type. Perhaps there would be a way to duplicate the content type in the H5P hub and only override the CSS for that, however.

So we just have to accept that the information is obscured by slide transitions a little, or of course author in something like Articulate Storyline, the tradeoff, as always, is between simplicity and cleanliness of H5P and control. Thanks to you otacke for helping me explore this.

otacke's picture

otacke

Mon, 05/06/2024 - 17:31

Yes, that hook would impact all contents alike (or be painful to use). You can create a fork, of course. but then Eurekos will need to install it on your instance, and having two basically identical versions of a content type can be confusing for authors.