Menu icon Foundation
[Solved] How to initiate a transition on Orbit?

 

Orbit works out of the box ... but how do I initiate the fade in/out transition? I've tried several options from the docs but I can't get it working ... !? Do I have to use data-animate="fade-in fade-out"? Where to put it? Or do I have to use another piece of code?

<!-- banner -->
<div class="orbit" role="region" aria-label="banner pictures" data-orbit>
<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <txp:image id="68" class="orbit-image" />
  </li>
  <li class="orbit-slide">
    <txp:image id="69" class="orbit-image" />
  </li>
</div>

Orbit

 

Orbit works out of the box ... but how do I initiate the fade in/out transition? I've tried several options from the docs but I can't get it working ... !? Do I have to use data-animate="fade-in fade-out"? Where to put it? Or do I have to use another piece of code?

<!-- banner -->
<div class="orbit" role="region" aria-label="banner pictures" data-orbit>
<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <txp:image id="68" class="orbit-image" />
  </li>
  <li class="orbit-slide">
    <txp:image id="69" class="orbit-image" />
  </li>
</div>
Joop Vos about 3 years ago

One more try with data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" and the animation is working ... :)

 

<!-- banner -->
<div class="orbit" role="region" aria-label="banner pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <txp:image id="68" class="orbit-image" />
  </li>
  <li class="orbit-slide">
    <txp:image id="69" class="orbit-image" />
  </li>
</div>

Jarryd Fillmore about 3 years ago

Awesome!