Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
smallio

Slide Transitions

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

@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

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×