title: How to make SlideIn and SlideOut effects using QpropertyAnimation?
body: <h2>My goal</h2>
  <p>I want to animate images in a slide show like this:</p>
  <pre><code>&lt;&lt; Animation Direction &lt;&lt;  
  /* THIS IS EXPECTATION */  
  
  ++++++++++++++++++++--------------------
  ++++++++++++++++++++--------------------
  +++ CURR IMAGE +++++------ NEXT IMAGE --
  ++++++++++++++++++++--------------------
  ++++++++++++++++++++--------------------
  &lt;--- VIEW ---------&gt;
  
  ++++++++++++--------------------
  ++++++++++++--------------------
   IMAGE +++++------ NEXT IMAGE --
  ++++++++++++--------------------
  ++++++++++++--------------------
  &lt;--- VIEW ---------&gt;
  
  --------------------
  --------------------
  ------ NEXT IMAGE --
  --------------------
  --------------------
  &lt;--- VIEW ---------&gt;
  </code></pre>
  <h2>What I've tried</h2>
  <p>I use two instances of <code>QPropertyAnimation </code>:</p>
  <pre><code>d-&gt;currImage      = new QLabel(ui-&gt;frmSlideshow);
  d-&gt;currImage-&gt;setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
  d-&gt;animCurrImage  = new QPropertyAnimation(d-&gt;currImage, &quot;geometry&quot;);
  
  d-&gt;nextImage      = new QLabel(ui-&gt;frmSlideshow);
  d-&gt;nextImage-&gt;setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
  d-&gt;animNextImage  = new QPropertyAnimation(d-&gt;nextImage, &quot;geometry&quot;);
  
  connect(d-&gt;animNextImage, SIGNAL(finished()),this, SLOT(applyBackground()));
  connect(&amp;(d-&gt;timer), SIGNAL(timeout()), this, SLOT(timer_timeout()));
  d-&gt;timer.start(1500);
  </code></pre>
  <p>On timeout I do the following:</p>
  <pre><code>QPixmap pixCurrImage;
  pixCurrImage.load(d-&gt;currImagePath());
  d-&gt;currImage-&gt;setPixmap(pixCurrImage);
  
  QPixmap pixNextImage;
  pixNextImage.load(d-&gt;nextImagePath());
  d-&gt;nextImage-&gt;setPixmap(pixNextImage);
  
  d-&gt;currImage-&gt;show();
  d-&gt;currImage-&gt;raise();
  d-&gt;currImage-&gt;setFixedSize(ui-&gt;frmSlideshow-&gt;size());
  
  d-&gt;nextImage-&gt;show();
  d-&gt;nextImage-&gt;raise();
  d-&gt;nextImage-&gt;setFixedSize(ui-&gt;frmSlideshow-&gt;size());
  
  d-&gt;animCurrImage-&gt;setDuration(500);
  d-&gt;animCurrImage-&gt;setStartValue(QRect(0, 0, ui-&gt;frmSlideshow-&gt;width(), ui-&gt;frmSlideshow-&gt;height()));
  d-&gt;animCurrImage-&gt;setEndValue(QRect(-1*ui-&gt;frmSlideshow-&gt;width(), 0, ui-&gt;frmSlideshow-&gt;width(), ui-&gt;frmSlideshow-&gt;height()));
  
  d-&gt;animNextImage-&gt;setDuration(500);
  d-&gt;animNextImage-&gt;setStartValue(QRect(2*ui-&gt;frmSlideshow-&gt;width(), 0, ui-&gt;frmSlideshow-&gt;width(), ui-&gt;frmSlideshow-&gt;height()));
  d-&gt;animNextImage-&gt;setEndValue(QRect(0, 0, ui-&gt;frmSlideshow-&gt;width(), ui-&gt;frmSlideshow-&gt;height()));
  
  QParallelAnimationGroup * group = new QParallelAnimationGroup(this);
  group-&gt;addAnimation(d-&gt;animCurrImage);
  group-&gt;addAnimation(d-&gt;animNextImage);
  group-&gt;start();
  </code></pre>
  <h2>My problem</h2>
  <p>A small gap (approx 100px) is showing between both sliding images:</p>
  <pre><code>&lt;&lt; Animation Direction &lt;&lt;  
  /* THIS IS HAPPENING*/  
  
  ++++++++++++   --------------------
  ++++++++++++   --------------------
   IMAGE +++++   ------ NEXT IMAGE --
  ++++++++++++   --------------------
  ++++++++++++   --------------------
  &lt;--- VIEW ---------&gt;
  
  +++   --------------------
  +++   --------------------
  +++   ------ NEXT IMAGE --
  +++   --------------------
  +++   --------------------
  &lt;--- VIEW ---------&gt;
  
  --------------------
  --------------------
  ------ NEXT IMAGE --
  --------------------
  --------------------
  &lt;--- VIEW ---------&gt;
  </code></pre>
  <p>How to make it either work as expected, or achieve the desired animation in some other way?</p>