Slider/Carousel with timeline

[Ard 1 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

 

[Ard 1 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

[Ard 1 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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");

 

[Ard 1 Likes (Newbie)]

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()? 

[Jonathan 5,176 Likes (Superhero)]

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.

[Ard 1 Likes (Newbie)]

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

[Ard 1 Likes (Newbie)]

See the Pen aBWEYo by Ard (@Ard) on CodePen

 

I think I did it;)