Jump to content
GreenSock

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

Slider/Carousel with timeline

Recommended Posts

Hey,

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.

 

CodePen: 

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

Link to post
Share on other sites

Hello Ard and welcome to the GreenSock Forum!

 

I'm not near my computer but this example should get you in the right direction

 

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

 

You can always change the fade to a different effect.

 

And another one by Chrysto

 

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

 

:)

  • Like 2
Link to post
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 post
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 post
Share on other sites

Yes, thank you for your time and help. I also understood that I could add a "+=" which extends the duration of the caption.

 

Currently it looks like this: 

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

 

The last step is probably cleaning up and making this more universal ;)

Link to post
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 post
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 post
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 post
Share on other sites

Okay, last question. My head is about to explode;)

Why caption is visible? js line 117 and 119, the same pattern of action, one works well the other is not?

timeline in js line 106

 

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

Link to post
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.

×