Help with slider using GSAP

[adamhopkins 2 Likes (Newbie)]

Hello,

 

I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line.

 

 

As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block

 

The slides use the following timeline

 

var tlSlideOut = new TimelineLite()
tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"})
.add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0)
.add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0)


var tlSlideIn = new TimelineLite()
tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"})
.add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0)
.add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0)

Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated.

 

Many Thanks

 

Adam

 

See the Pen MyKVJW by anon (@anon) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Nice job on the slider.

 

Thanks for posting the CodePen demo.

 

The tweens for the left side are definitely starting at the right time. 

The problem is that they are traveling a greater distance.

 

I changed only the css to shrink the slider, turn off overflow:hidden and gave each slide an opacity so that you can see everything moving.

 

check it out:

 

http://codepen.io/GreenSock/pen/ZWQmXG?editors=0100

[adamhopkins 2 Likes (Newbie)]

Thanks for the reply Carl...and thanks for taking a look at my issue.

 

To my relief, I have managed to get the desired effect after some work last night. I wish I'd have thought of making the tweaks you did as it certainly gives a better idea of the bigger picture and whats going on behind the scenes. I'd have probably got to the end a lot quicker.

 

Anyway, here is my tweaked (and finished) slider

 

See the Pen wGMbLj?editors=0110 by anon (@anon) on CodePen