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.
http://codepen.io/anon/pen/MyKVJW
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