Jump to content

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

Help with slider using GSAP

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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




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

  • Like 1
Link to comment
Share on other sites

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:



  • Like 3
Link to comment
Share on other sites

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

  • Like 1
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.