Slide Transitions

[smallio]

Hi guys,

 

I'm practicing slider logic at the moment & seem to be stuck scaling the coloured boxes correctly. After the final slide it breaks due to previous boxes remaining visible on top. I'd love to know more about how to prevent this!

 

On each click I'm trying to get the current box to scaleX out from right to left and the new one to scale in like it already is. I've tried to condense the example down as much as possible.

 

Cheers!

Smallio

 

See the Pen MqpOzL?editors=0010 by smallio (@smallio) on CodePen

[mikel]

Hi @smallio,

 

One option is:

function next() { 
  if(++index < messages.length){
    headingForward(index);
  } else {
    index = 0;
    TweenLite.set(boxes,{scaleX: 0})
    headingForward(index);
  }
}

function previous() { 
  if(--index > -1 ){
    TweenLite.set(boxes,{scaleX: 0})
    headingBack(index);
  } else {
    index = messages.length-1;
    headingBack(index);
  }
}

 

See the Pen RYpxRj by mikeK (@mikeK) on CodePen

 

This could possibly be optimized for 'prev'.

 

Happy tweening ...

Mikel

[smallio]

@mikel

 

Brilliant, thank you.

 

I was closer then I thought! I tried using it outside the function and it didn't work. 

 

How does the set not effect the current box when it's used in the function?

 

Cheers,

Smallio