Jump to content
GreenSock

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

Timeline slider - z-index & back problem

Recommended Posts

Hi all,

 

Trying to recreate a timeline slider @jesper.landberg made for some constructor practice.

 

Nearly finished, however I can't seem to get the z-index/xPercent right for the back animation.  I'm wondering if anyone knows how to keep the transition the same when we go back & keep the slide underneath like when we go forward? 

 

Really need to get better with slide logic, for sure my weakest point.

 

Cheers!

 

See the Pen XGeQyY?editors=0110 by smallio (@smallio) on CodePen

Link to comment
Share on other sites

I don't really have time at the moment to dissect all the code/logic and fix it for you, but from a cursory glance it looks like issues with how you're handling the whole last/current/next data. Your slideIt() function doesn't accept any parameters, yet you're feeding 3 parameters to it from your next() and prev() methods. Furthermore, that function looks like it's only considering "last" and "current" values (which you're setting in next()), but not "next" (which you're setting in prev()). 

 

Perhaps you just need to normalize things on "current" and "next". 

 

In short, I'm pretty sure it's a logic issue in the way you're handling last/current/next and has nothing to do with GSAP or zIndex :)

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

26 minutes ago, GreenSock said:

I don't really have time at the moment to dissect all the code/logic and fix it for you, but from a cursory glance it looks like issues with how you're handling the whole last/current/next data. Your slideIt() function doesn't accept any parameters, yet you're feeding 3 parameters to it from your next() and prev() methods. Furthermore, that function looks like it's only considering "last" and "current" values (which you're setting in next()), but not "next" (which you're setting in prev()). 

 

Perhaps you just need to normalize things on "current" and "next". 

 

In short, I'm pretty sure it's a logic issue in the way you're handling last/current/next and has nothing to do with GSAP or zIndex :)

 

Ah lord, that was the one I edited & left for later, whoops! Swapped the vars back now lol. Good shout on the normalize though, going to give that a try. 

 

Cheers! 

 

Link to comment
Share on other sites

You probs solved this already but the problem is in your prev() function, ur just setting this.data.next. It should/could look like this:

 

  prev() {
    if (this.data.animating) return
    this.data.direction = "back"
    
    this.data.next = this.data.current
    this.data.current = this.data.current == 0 ? 2 : this.data.current - 1
    
    this.slideIt()
  }

 

Then u could just check the direction in slideIt() for example like this:
 

const translateX = this.data.direction === 'back' ? -100 : 100


      

  • Like 2
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.
×