Jump to content
Search Community

Slider/Carousel with timeline

Ard test
Moderator Tag

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 wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation.

I feel that the solution is very easy, and I sit on it far too long to find them.



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

Link to comment
Share on other sites

Thanks. The first example seems to be what I need.

Unfortunately, I still have some problems, maybe someone will be able to help me?

1) The first slide should begin with animation, but now is visible and after a while you can see action. I know this is probably fault .css and autoalpha how to get around this?
2) how to add duration? between input and output should be an interval lasting for x seconds.
3) as you can see, each slide operates on the same principle, and it's awfully silly to repeat. how to fix it? should be 2 timeline, and the interval between them to read the text? how to do this?


New Pen: 

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

Link to comment
Share on other sites

Something like this?


See the Pen XNRXbO by jonathan (@jonathan) on CodePen


I converted all opacity to autoAlpha and gave all slides a default of CSS visibility:hidden due to using autoAlpha. I also added a delayedCall() which is like using setTimeout() of 2 seconds but better ;)


autoAlpha is part of the CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});
Happy Tweening :)
  • Like 1
Link to comment
Share on other sites

Glad to help and yes you can extend the duration with +=


But you can also add a empty tween before your fade out out the slide. So before the last to() tween in each of your slide functions you can add something like this:


See the Pen wodGdN by jonathan (@jonathan) on CodePen


.to({},2,{}) // add 2 second wait time
.to($slide1, fadeSpeed, {css:{autoAlpha:0}});

There are other ways by adding a delay to the last tween

.to($slide1, fadeSpeed, {css:{autoAlpha:0},delay:2});

or using a relative position parameter

.to($slide1, fadeSpeed, {css:{autoAlpha:0}}, "+=2");



  • Like 2
Link to comment
Share on other sites

I wish slider was more universal, but I do not know how to combine the functionality from previously created timeline.

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

-> copy from your example, I used fadeIn instead left transform.

how to add a timeline from

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


Create functions for entry and exit and add in gotoSlide()

Link to comment
Share on other sites

You would have to

  • Add tweens to line 56 that is the next button animation if statement
  • And the prev next button animation if statement is on line 59

With a slider there a 100+ ways to program it. Whether it has predefined slides or is dynamic. It just depends how and what you want it to do. Both examples are programed differently.

  • 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.
  • Create New...