Different easing-types for transitions?

[morischu]

Hey,

i'm quite new to impress.js, but i need it for a project-work for my study (subject is animation). So my question is: Is it possible to change the easing-types within impress.js? The default setting is kind of a standard "easeInOutSine" type, but i want several different dynamics with anticipation like "easeInOutElastic" There are multiple easing-types for css or js that i found here: http://easings.net/de

How do i intigrate them in impress.js?

Thanks a lot morischu

[bartaz]

Currently easing of the animation between the slides is hardcoded as 'ease-in-out' here: https://github.com/impress/impress.js/blob/master/js/impress.js#L374

If you want to use any other CSS easing you can just change it there. It will change the easing of animation between all the steps. If you'd like to have different easings between different steps in one presentation it's not easily done with impress.js and would require much code changes.

Only easings supported by CSS will work with impress.js.

[FagnerMartinsBrack]

We can allow custom easing support for impress.js eventually.

[henrikingo]

impress.js now supports plugins. It would certainly be possible to refactor the step transition code into a plugin. This would allow different easing types to be added and allow user to choose them by configuration. It would also allow users to write their own plugins.

The required refactoring is non-trivial, but kind of straightforward.

[tobiasBora]

Any new about that? I'd like to define my transition to be more "on a line", because for now the transitions (when changing scale) are a bit chaotic and oscillate at bit.

[henrikingo]

I'm not aware of any ongoing work on this.

[tobiasBora]

Ok thanks, that's too bad... So I tried to look at the code to see first if I could find a quick and dirty hack, and then to see if it could be eventually possible to write a plugin for that, but right now it's not clear at all to me what makes the view oscillate (sometimes it's a really huge oscillation). I just saw that the transition oscilate when the scale is changing (if the scale is fixed the transition is pretty stable). So I tried to play with rootStyles without any chance so far, and I can't find any "Bezier-curve" or similar that explains why during the transition the position of the camera does these strange movement.

As an example, I tried to put a fully green slide taking all the screen space, and I put a red background for html (so you couldn't see any red background initially), and a data-scale=1000. I then put a second slide (say blue background) inside the first one, but not in the center (if it's in the center the oscillation effect is not visible), say at around 40% height/40% width, with this time a data-scale=1. So if the transition was "monotonous", I would expect to never see the red background, because it should just zoom in... But quite strangely I do see the red background during the animation, and the transition is oscillating. To get an example, just clone this repo, add style="background: red"; in the body attributes, and add in index.html right before the bored slide:

    <div id="accueil" class="step" style="width:100vw; height:100vh; background: green;" data-x="0" data-y="0" data-scale="100">
        ABC
    </div>

    <div id="presentation" class="step" style="width:100vw; height:100vh; background: blue;" data-x="5000" data-y="5000" data-scale=1>
    </div>

Then, runder it in full screen (don't know why, 100vw does not cover the view port if I'm not in full screen) and observe.

Visual result during transition between these two slides (see the red background on the bottom + right part of the picture that should never appear as the target (blue rectangle) is inside the shape):

Does anyone understand what produces in the code these oscillations/non-monoticity?

[henrikingo]

To provide custom transitions would require refactoring and adding a new type of plugin.

For your actual question, I believe what you are seeing is due to this code: https://github.com/impress/impress.js/blob/master/src/impress.js#L503-L551

Since you are zooming in, the sideways translation will happen first, and the change from scale: 1000 to 1 happens delayed. Since the blue slide isn't exactly at the center of the brown one, the camera will briefly show area outside the brown slide, before it starts zooming into the blue slide.

You seem to be saying that the transition also isn't smooth. If you're using Firefox, it is due to #650. If it is happening on chrome, then it is because your scale is so big it is too heavy on the browser.

[janishutz]

This is something I am currently working on planning out and soon(ish)(TM) starting to refactor. I am not yet entirely sure how it is going to look exactly, but I have some vague ideas

[janishutz]

Will be discussed in #863

@tobiasBora @morischu Expect this to be supported in about 6 months or less