With version 1.2 of Timeline Express Pro we’ve enabled jump links, so you can either link directly to an announcement on the timeline from another page or post, or you can send users a link so when they click it they are brought to the appropriate announcement on the timeline.

All you need to do is append the announcement slug to the end of the URL which links to your timeline.

An example, linking to an announcement post titled “Spring Break” would be put together like so:
http://www.example.com/timeline#spring-break

As another example, linking to an announcement post titled “The World is Ending” would look like:
http://www.example.com/timeline#the-world-is-ending

It is worth noting that if you have multiple announcements named the same thing, the slug may be different. You can retrieve the slug by editing the announcement and viewing directly under the Title field, next to the text ‘Permalink:.

Here is an example, linking directly to the ‘Wedding’ announcement on the basic timeline demo, here on the site:
https://www.wp-timelineexpress.com/examples/basic-timeline/#wedding

Filter the Scroll Effects

Important: In this section we include some code to alter the default behavior of Timeline Express. Any code referenced in this section should go directly into the bottom of your theme (or child theme) functions.php file. If you are not familiar editing .php files, it is highly recommended that you use a third party plugin to achieve the same effect. We recommend the plugin My Custom Functions.

We’ve also included two filters, to allow you to filter the scrolling that happens when you land on the page with a query string in the URL. You can control both the speed, and the easing that occurs during the scroll.

The two filters are timeline_express_scroll_to_speed and timeline_express_scroll_to_animation.

The default timeline_express_scroll_to_speed is 700ms. If you’d like to extend the duration of the scroll, to 2 seconds for example, you can use the following snippet:

/**
* Increase the scroll to duration from 700ms (.7s) to 2000ms (2s)
* @param integer $duration The initial value of the scroll to duration.
* @since 1.2
*/
function timeline_express_increase_scroll_to_duration( $duration ) {
   return 2000; // 2000ms - set to 0 to disable scroll altogether
}
add_filter( 'timeline_express_scroll_to_speed', 'timeline_express_increase_scroll_to_duration' );

Additionally, you can alter the scroll animation. Out of the box, WordPress enables two separate types of easing options: linear and swing. By default, the swing option is used for the easing. To set the easing to ‘linear’ for a more linear scrolling, you can use the following function.

/**
* Increase the scroll to duration from 'swing' to 'linear'
* @param string $animation The initial animation type.
* @since 1.2
*/
function timeline_express_increase_scroll_to_animation( $animation) {
   return 'linear'; // possible swing or linear
}
add_filter( 'timeline_express_scroll_to_animation', 'timeline_express_increase_scroll_to_animation' );
Note: You can easily enable the rest of the jQuery UI Easing Effects by enqueueing the appropriate stylesheets from a CDN of your choice. We won’t get into that here, but it can easily be done with a little know how, so you can use some additional effects such as easeInOutExpo and easeInBounce.

2 Comments

  1. Is it possible to include a link back to the main timeline when viewing an individual announcement?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.