Timeline slider - z-index & back problem

[smallio]

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

[GreenSock]

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

[PointC]

[smallio]

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! 

 

[jesper.landberg]

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