-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Different easing-types for transitions? #488
Comments
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. |
We can allow custom easing support for impress.js eventually. |
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. |
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. |
I'm not aware of any ongoing work on this. |
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 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
Then, runder it in full screen (don't know why, 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? |
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: 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. |
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 |
Will be discussed in #863 @tobiasBora @morischu Expect this to be supported in about 6 months or less |
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
The text was updated successfully, but these errors were encountered: