Animation speed?
Permalink Browser Info Environment
First let me commend you on designing such a great theme!
I have a couple of quick questions:
Is it possible to change/override the speed of the text animation styles?
Secondly, is there a way to attach a slide navigation function to a button embedded on one of the slides? For example, I'd like to put a button on the first slide that triggers the animated navigation to the second slide, just like using the header slide navigation. I tried using an HTML anchor but it resulted in navigation without the slide effect (and it caused some weird problems on the iPad)
Thanks!
James
I have a couple of quick questions:
Is it possible to change/override the speed of the text animation styles?
Secondly, is there a way to attach a slide navigation function to a button embedded on one of the slides? For example, I'd like to put a button on the first slide that triggers the animated navigation to the second slide, just like using the header slide navigation. I tried using an HTML anchor but it resulted in navigation without the slide effect (and it caused some weird problems on the iPad)
Thanks!
James
| Type: | Discussion |
|---|---|
| Status: | New |
Works perfectly. Thanks for the quick response!
-James
-James
I was wondering if there is a way to make the animations fire at different times?
Thanks.
Seth
Thanks.
Seth
Hi Seth,
unfortunately this is not possible out of the box, it requires some tweaking. Anyway this is a good idea, I'll try to include this option in future releases.
If you feel comfortable editing the theme files, to make the animations fire at different times try the following:
1. Edit the custom.js file and find lines 113-129:
2. Replace the previous lines with the following:
Once you've made these changes, open the Content Editor to add the animations to your slide. Once you have added them, click on the HTML button to edit the HTML code directly. All animated elements should have a class added to them:
To delay the execution of the animation, simply add a "data-delay" attribute with a value (in seconds):
If you add different elements with different delay values (0.5, 2, 3, etc.), the animations should fire at different times.
Please let me know if you get this to work.
Regards,
Jordi
unfortunately this is not possible out of the box, it requires some tweaking. Anyway this is a good idea, I'll try to include this option in future releases.
If you feel comfortable editing the theme files, to make the animations fire at different times try the following:
1. Edit the custom.js file and find lines 113-129:
var animation = element.attr('data-animation'); switch(animation) { case "fly-in-left": element.css('position','relative'); var tween = TweenMax.from(element, .25, {css:{right:'1000px'}, ease:Quad.easeInOut}); break; case "fly-in-right": element.css('position','relative'); var tween = TweenMax.from(element, .25, {css:{left:'1000px'}, ease:Quad.easeInOut}); break; case "space-in": element.css('white-space','nowrap'); var tween = TweenMax.fromTo(element, .5, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'0px'}, ease:Quad.easeInOut}); break; default:
Viewing 15 lines of 17 lines. View entire code block.
2. Replace the previous lines with the following:
var animation = element.attr('data-animation'); var delaySeconds = element.attr('data-delay'); if (typeof delaySeconds === "undefined") { delaySeconds = 0; } switch(animation) { case "fly-in-left": element.css('position','relative'); var tween = TweenMax.from(element, .25, {delay: delaySeconds,css:{right:'1000px'}, ease:Quad.easeInOut}); break; case "fly-in-right": element.css('position','relative'); var tween = TweenMax.from(element, .25, {delay: delaySeconds,css:{left:'1000px'}, ease:Quad.easeInOut}); break; case "space-in": element.css('white-space','nowrap'); var tween = TweenMax.fromTo(element, .5, {delay: delaySeconds,css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'0px'}, ease:Quad.easeInOut});
Viewing 15 lines of 19 lines. View entire code block.
Once you've made these changes, open the Content Editor to add the animations to your slide. Once you have added them, click on the HTML button to edit the HTML code directly. All animated elements should have a class added to them:
<p><span class="animate-fade-in">Animated text</span></p>
To delay the execution of the animation, simply add a "data-delay" attribute with a value (in seconds):
<p><span class="animate-fade-in" data-delay="1">Animated text</span></p>
If you add different elements with different delay values (0.5, 2, 3, etc.), the animations should fire at different times.
Please let me know if you get this to work.
Regards,
Jordi
Thanks for the nice words!
Right now it isn't possible to change this through the dashboard, but if you feel comfortable editing the code you could try this:
1. To change the speed of the text animation styles, edit the following file:
/packages/theme_long_story_short_parallax/themes/long_story_short_parallax/js/custom.js
Find lines 119-134:
Change the ".25" and ".5" values to your needs, for instance to make it slower:
2. That's a great idea, I'll consider adding this in future realeases. In the meantime, you should edit the same file to achieve this:
/packages/theme_long_story_short_parallax/themes/long_story_short_parallax/js/custom.js
Find line 205:
Add a class for the new nav link, for instance:
Find line 272:
Add the same class again:
Now you should be able to add a link or button to navigate to any slide. You only have to add the "mylink" class to the element, for example:
(Where "#slide2" is the id of the slide)
Hope this helps!
Jordi