[vzkb]

Dear Ladies and Gents,
we are new to INTENSE and run in an issue with the timeline (dual).
We set up a timeline with 5 events.
And at the frontend, the first event is on the left side, and all the other 4 events are on the right side.
Please see here:
https://monosnap.com/file/MJR0YzpmOBbWANzTvc8UtBxB0aZJsD
In our understanding, the events location should alternate between left and right, shouldn’t it?
Maybe we did something wrong while setting it up.
But in your documentation of the timeline (http://docs.intenseplugin.com/Layout_-_Shortcodes/Timeline.html)
it looks like this.

Any help is highly appreciated.

Many thanks in advance,
Joe

[Intense Visions]

Joe,

Hello!

Thank you for using Intense. Can you send us the shortcode that you’re using, so we can try it locally. If we cannot duplicate the issue, we may need to get temporary access to your site (if that is possible) so that we can dig deeper into the issue.

Thanks,

Josh

[vzkb]

Hello Josh,
thanks a ot for your reply.
At the moment we are running the site on a MAMP.
But if you need to do further investigation i will put it on a staging server.

Here is the shortcode we are using:

[intense_timeline column_mode="dual" animation="" animation_type="bounce" show_year=""][intense_timeline_event type="blog_post" title="Tag 1" use_content="" color="#efefef" readmore_target="_self" featured="" animation_type="bounce" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-01"]<a href="http://local.myoffice4travel.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns6.jpg"><img class="alignleft size-thumbnail wp-image-971" src="http://local.myoffice4travel.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns6-150x150.jpg" alt="kenburns6.jpg" width="150" height="150" /></a>Donec vel ex et eros dictum pharetra a vitae nunc. Sed maximus lacus sit amet lorem tempor consectetur. Nulla congue tempus turpis, malesuada pharetra tellus lobortis a. Praesent consequat ornare risus scelerisque hendrerit. Praesent nisl erat, porta sed blandit a, auctor in libero. Maecenas in consectetur risus. Duis rutrum consequat nisl; pulvinar iaculis nunc sollicitudin ac! Proin commodo tempus elit, nec sodales magna volutpat eget! Donec vestibulum ligula et dui mollis blandit. Donec mi purus; aliquet accumsan commodo quis; cursus sit amet arcu. Sed varius lectus mi, et euismod enim imperdiet eget. Pellentesque sem elit, bibendum maximus molestie eu, convallis vitae leo? Quisque a laoreet risus. Fusce pharetra ullamcorper tempor. Suspendisse non semper neque. Nullam laoreet, lectus ut imperdiet tristique, diam tortor blandit ipsum, vitae fringilla urna elit vitae ipsum.[/intense_timeline_event][intense_timeline_event type="blog_post" title="Tag 2" use_content="" color="#efefef" readmore_target="_self" featured="" animation_type="bounce" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-02"]
<ul class="nicdark_list border">
	<li class="nicdark_border_grey">
<h5 class="grey subtitle">BREAKFAST IN HOTEL <a class="nicdark_btn nicdark_bg_yellow extrasmall   white right" href="#">9:00 - 10:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">DEPARTURE BY BUS TO COLOSSEUM<a class="nicdark_btn nicdark_bg_orange extrasmall   white right" href="#">10:00 - 11:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">GUIDED TOUR OF THE MONUMENT <a class="nicdark_btn nicdark_bg_red extrasmall   white right" href="#">11:00 - 12:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">LUNCH IN TYPICAL RESTAURANT <a class="nicdark_btn nicdark_bg_violet extrasmall   white right" href="#">12:00 - 15:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">VISIT OF THE CITY <a class="nicdark_btn nicdark_bg_blue extrasmall   white right" href="#">15:00 - 17:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">FREE AFTERNOON <a class="nicdark_btn nicdark_bg_green extrasmall   white right" href="#">17:00 - 18:00</a></h5>
</li>
</ul>
[/intense_timeline_event][intense_timeline_event type="blog_post" title="Tag 3" use_content="" images="973" image_size="medium" image_border_radius="5px" color="#efefef" readmore_target="_self" featured="" animation_type="bounce" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-03"]Maecenas ante diam, tincidunt vel sem ut; dictum euismod ex. Maecenas ullamcorper pulvinar risus, sed convallis lorem luctus non. Duis efficitur posuere ex, eu auctor augue accumsan at. Sed nec libero eget mi laoreet pellentesque. Fusce vitae diam sed nibh molestie aliquam.[/intense_timeline_event][intense_timeline_event type="blog_post" title="Tag 4" use_content="" images="973" image_size="medium" image_border_radius="5px" color="#efefef" readmore_target="_self" featured="" animation_type="bounce" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-04"]Day 4[/intense_timeline_event][intense_timeline_event type="blog_post" title="Tag 5" use_content="" images="973" image_size="medium" color="#efefef" readmore_target="_self" featured="" animation_type="bounce" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-05"]Day 5[/intense_timeline_event][/intense_timeline]

Thanks a lot,
Joe

[Intense Visions]

Joe,

Hello!

Sorry it took so long to respond. It took some troubleshooting to figure out exactly what was causing the issue.

It looks like the issue is caused by the animation type being “bounce”. Once I removed that animation type, the timeline looked correct. I am including the updated code below.

[intense_timeline column_mode="dual" animation="" animation_type="bounce" show_year=""]
[intense_timeline_event type="blog_post" title="Tag 1" use_content="" color="#efefef" readmore_target="_self" featured="" animation_type="" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-01" column_mode="dual"]
Donec vel ex et eros dictum pharetra a vitae nunc. Sed maximus lacus sit amet lorem tempor consectetur. Nulla congue tempus turpis, malesuada pharetra tellus lobortis a. Praesent consequat ornare risus scelerisque hendrerit. Praesent nisl erat, porta sed blandit a, auctor in libero. Maecenas in consectetur risus. Duis rutrum consequat nisl; pulvinar iaculis nunc sollicitudin ac! Proin commodo tempus elit, nec sodales magna volutpat eget! Donec vestibulum ligula et dui mollis blandit. Donec mi purus; aliquet accumsan commodo quis; cursus sit amet arcu. Sed varius lectus mi, et euismod enim imperdiet eget. Pellentesque sem elit, bibendum maximus molestie eu, convallis vitae leo? Quisque a laoreet risus. Fusce pharetra ullamcorper tempor. Suspendisse non semper neque. Nullam laoreet, lectus ut imperdiet tristique, diam tortor blandit ipsum, vitae fringilla urna elit vitae ipsum.[/intense_timeline_event]
[intense_timeline_event type="blog_post" title="Tag 2" use_content="" color="#efefef" readmore_target="_self" featured="0" animation_type="" animation_trigger="scroll" animation_scroll_percent="0" date="2001-01-02" column_mode="dual"]
<ul class="nicdark_list border">
	<li class="nicdark_border_grey">
<h5 class="grey subtitle">BREAKFAST IN HOTEL <a class="nicdark_btn nicdark_bg_yellow extrasmall   white right" href="#">9:00 - 10:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">DEPARTURE BY BUS TO COLOSSEUM<a class="nicdark_btn nicdark_bg_orange extrasmall   white right" href="#">10:00 - 11:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">GUIDED TOUR OF THE MONUMENT <a class="nicdark_btn nicdark_bg_red extrasmall   white right" href="#">11:00 - 12:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">LUNCH IN TYPICAL RESTAURANT <a class="nicdark_btn nicdark_bg_violet extrasmall   white right" href="#">12:00 - 15:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">VISIT OF THE CITY <a class="nicdark_btn nicdark_bg_blue extrasmall   white right" href="#">15:00 - 17:00</a></h5>
<div class="nicdark_space15"></div></li>
	<li class="nicdark_border_grey">
<div class="nicdark_space15"></div>
<h5 class="grey subtitle">FREE AFTERNOON <a class="nicdark_btn nicdark_bg_green extrasmall   white right" href="#">17:00 - 18:00</a></h5>
</li>
</ul>
[/intense_timeline_event]
[intense_timeline_event type="blog_post" title="Tag 3" use_content="" images="973" image_size="medium" image_border_radius="5px" color="#efefef" readmore_target="_self" featured="0" animation_type="" animation_trigger="scroll" animation_scroll_percent="0" date="2005-01-03" column_mode="dual"]Maecenas ante diam, tincidunt vel sem ut; dictum euismod ex. Maecenas ullamcorper pulvinar risus, sed convallis lorem luctus non. Duis efficitur posuere ex, eu auctor augue accumsan at. Sed nec libero eget mi laoreet pellentesque. Fusce vitae diam sed nibh molestie aliquam.[/intense_timeline_event]
[intense_timeline_event type="blog_post" title="Tag 4" use_content="" images="973" image_size="medium" image_border_radius="5px" color="#efefef" readmore_target="_self" featured="0" animation_type="" animation_trigger="scroll" animation_scroll_percent="0" date="2006-01-04" column_mode="dual"]Day 4[/intense_timeline_event]
[intense_timeline_event type="blog_post" title="Tag 5" use_content="" images="973" image_size="medium" color="#efefef" readmore_target="_self" featured="0" animation_type="" animation_trigger="scroll" animation_scroll_percent="0" date="2007-01-05" column_mode="dual"]Day 5[/intense_timeline_event][/intense_timeline]

We will do some research to find out why the issue happens with that animation.

Thanks,

Josh

[Author]

Posts