Skip to content
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

apply data-transition-duration to arbitrary steps #142

Closed
kjmatthews opened this issue Apr 25, 2012 · 9 comments

Comments

Projects
None yet
6 participants
@kjmatthews
Copy link

commented Apr 25, 2012

Step transitions that zoom way in or out can be very jarring using impress.js. Setting the transition duration the #impress element is perfect for most transitions, but usually too short for transitions that zoom significantly. Is it possible to set transition timings for individual steps to mitigate this issue?

@bartaz

This comment has been minimized.

Copy link
Member

commented May 5, 2012

At the moment you can only configure transition duration for all steps (on impress.js root element).

But I understand that it would be useful to be able to configure this (and possibly other options) on step level.

@bbub

This comment has been minimized.

Copy link

commented Dec 31, 2012

First of all, thanks a lot for impress.js - it's impressiv and lots of fun ;-)

I had the same question as kjmatthewes. I solved this by adding a few new if-queries right at the beginning of the getStep function in impress.js (around line 400) looking something like this:

if (step.id == "ID-of-Step-1" || step.id == "ID-of-Step-5") {
    config.transitionDuration = 3000;
}
if (step.id == "ID-of-Step-2" || step.id == "ID-of-Step-6") {
    config.transitionDuration = 1000;
}

Since mostly presentation play back is from beginning to end the transitionDuration only has to be changed for very few steps to a longer or back to a shorter period.
You can probably find a better way to search for more step-ids (Array?) and maybe you can insert the if-queries someplace else, but it worked for me (but I'm only using a new chrome browser for myself).

@ghost

This comment has been minimized.

Copy link

commented Mar 31, 2013

Here is the workaround that works for me:

Make a copy of the transitionDuration variable in the config element definition. Add this line in the definition (approx line 346):

transitionDurationReset: toNumber( rootData.transitionDuration, defaults.transitionDuration )

What that line does is it makes a copy of the transitionDuration variable, which would be required to reset the transition duration to the value specified in the root <div id="impress">...</div> element.

Then add this line at the beginning of the getStep method (approx line 400):

config.transitionDuration = step.getAttribute("data-transition-duration") == null ? config.transitionDurationReset : parseInt(step.getAttribute("data-transition-duration"));

Now you can specify the transition duration of any step by giving a value to the data-transition-duration attribute in the <div class = "step">...</div> tag.
This workaround tends to mess up the presentation workflow while navigating backwards, but since the presentation I am working on only navigates forward, I have to make do with this modification.

@FagnerMartinsBrack

This comment has been minimized.

Copy link
Member

commented Nov 11, 2014

In case anyone is interested, I have implemented this in a fork: web-stories/impress.js@4976b8e

@FagnerMartinsBrack

This comment has been minimized.

Copy link
Member

commented Mar 19, 2016

X-Ref: #339, #243.

henrikingo added a commit to henrikingo/impress.js that referenced this issue Aug 17, 2016

Support data-transition-duration atrtributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142
@henrikingo

This comment has been minimized.

Copy link
Contributor

commented Aug 17, 2016

FYI, I implemented this simple request now in my repo, see this commit

(I was actually going to merge the patch above from @FagnerMartinsBrack, but it doesn't work in current impress.js anymore, and ultimately when I was finished there was not a single line left from that patch, so didn't put you as author, but thanks for the proof of concept anyway.)

henrikingo added a commit to henrikingo/impress.js that referenced this issue Aug 19, 2016

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142
@greemo

This comment has been minimized.

Copy link

commented Sep 21, 2017

I feel the appropriate transition speed could be better adjusted per transition. Basically take the global setting (Which can be assumed as an on-plane 1 slide shift of camera position), and have scaling factors that change the transition time based on distance to travel along a vision path from old to new position.
I'll see what I can do about building a patch for my proposal. Here, and/or in Henriko's fork.

@henrikingo

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2017

@greemo In my fork you can already set data-transition-duration individually for each step. In milliseconds, not as a scaling factor. The patch linked above implemented just that.

henrikingo added a commit to henrikingo/impress.js that referenced this issue Oct 21, 2017

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142

henrikingo added a commit to henrikingo/impress.js that referenced this issue Oct 21, 2017

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142

henrikingo added a commit to henrikingo/impress.js that referenced this issue Oct 21, 2017

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142

henrikingo added a commit to henrikingo/impress.js that referenced this issue Oct 21, 2017

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142

henrikingo added a commit that referenced this issue Oct 23, 2017

Support data-transition-duration attributes for step elements.
If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
#142
@henrikingo

This comment has been minimized.

Copy link
Contributor

commented Jan 7, 2018

This is now supported in 1.0.0-beta1. Missed this when I closed tickets related to that release.

@henrikingo henrikingo closed this Jan 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.