PeTaWeb

Hello, o.k., I'm progressing with the issue. But it still isn't working smoothly. As I said before, I'm applying Tahir's suggestion to built a timelines array and then a timeline for each slide of the bootstrap carousel. Here is the modified codepen: http://codepen.io/anon/pen/pgowvM What I want to achieve is to reverse the timeline of each slide before the next slide comes into view. As you can see in the pen, I applied an onComplete function ("reverseFunction") for the slide indicators (not for the controls) as a parameter of the TimelineMax, like so: // Timeline for slider 1 function createTimeline1(element1, element2, element3, element4, element5) { var timeline1 = new TimelineMax({ onComplete: reverseFunction1 }); if (element1 !== '') { timeline1.from(element1, 0.9, { x: -1420, autoAlpha: 0, ease: Power4.ease, delay: 0.8 }); } if (element2 !== '') { timeline1.from(element2, 0.9, { x: 1420, autoAlpha: 0, ease: Power4.ease }, "-=0.9"); } // There can be more animations by just adding more "if()..." if (element3 !== '') { timeline1.from(element3, 0.8, { scale: 0, autoAlpha: 0 }, "-=0.2"); } return timeline1; function reverseFunction1() { $(".ind2").not(".ind1").click(function () { timeline1.reverse().timeScale(3); // timeScale because of slide transition speed }) } } But the problem is: I had to apply a timescale() to the reverse function, because the reversed animation lasts more than the slide fading in, so you hardly can appreciate the reversing animations. But the timescale() makes also the timeline going faster when going back to one of the slides. So, is there any possibility to apply the timescale to the reversed timeline but not to the "normal" timeline? Or is there a way to pause the bootstrap carousel during the reversed animation until the fade in of the next slide starts? Any help would be much appreciated. Best regards, Pete

Hello again, after I marked this issue as solved a few weeks ago, I now had to mark it as unsolved, because I´m facing another problem regarding the same issue. Finally I decided to apply Tahir´s suggestions to use the "timelines[]" array and the "createTimeline" function to achieve my purposes as it is the solution that best suits. But, what if I want to reverse the animations by clicking the next-button before the next slide comes into view? 1) Would it be a good idea to create another array similar to the "timelines" array and then create, let´s say, a "reverseTimeline" function that renders on next-button click event with reversed animations. I´m just trying that out, but can´t get it to work. And: 2) What about the time between the fade effect from one slide to the next, as it is about a bootstrap carousel with css transition-property of opacity with no time delay waiting for completing the reverse animations? Hope, the questions are not going to far, as it´s maybe not pure gsap issue. Anyway, any help would be appreciated. Best regards, Pete

Hi guys, thank you very much for supporting me with this issue. Finally, with your help, I got it to work as I wanted to, and I know now how to animate different elements on the different sliders. There is, though, one last point I cannot figure out how to solve: Right now, the animations happen directly after the next slider comes into view, very fast for my taste. I solved this issue by adding a delay to each timeline. My question is, if that way is the only one that exist to achieve the delay? So, thank you very much again. Best regards, Pete

Hi there, yes, of course I know the meaning of the "!==" operator, but I'm still confused about it. So, right now I'm trying it out and hopefully can get it to work. Thanks for your patience, Pete

Hi Tahir, thank you very much for further investigate the issues. I'm currently trying out if the code you provided works on my bootstrap carousel. But I found out that there is a part that I don't really understand: if (title !== '')...etc. What do I have to put into the empty strings here? Right now the animations are not working. In any case, I will work out the animations of the other elements to provide you more detailed information. Thanks a lot and best regards, Pete

Hi Tahir and hi Carl, thank you very much for the great support. @Carl: I've seen already Chrysto's and Blake's examples that you provided, but I was not able to apply these techniques to my bootstrap carousel. Thank you anyways. So, Tahir, I think your JS code is exactly what I needed. I knew before, that I had to adapt the JS for the carousel slide- (fade-) effects to get the gsap animations to work in the right place, but didn't know how. As I can see, you are using arrays for the timelines. So I was wondering what would happen if I'd like to add more gsap animations on more than just two elements (title1, title2). Would I just add more array elements to the "timelines" array and then append just the associated timelines? And what if I'd like to have more elements to animate on one slide but less on another slide. e.g.: var timelines = []; timelines[0] = createTimeline('.tlt', '.tlt2'); timelines[1] = createTimeline('.it-h3', '.it-h4'); timelines[2] = createTimeline('.title3', '.caption3', '.anotherElement3'); timelines[3] = createTimeline('.title4'); timelines[4] = createTimeline('.title5', '.caption5', '.anotherElement1-5', 'anotherElement2-5'); How would that effect the timelines? just adding more of them inside the createTimeline() function? Thanks very much for help. Much appreciated. Best regards, Pete

Hi there, so, does the codepen help you to better understand the issue? Best regards, Pete

Hi PointC, thank you for your quick reply and sorry for the delay. It's the first time I'm using CodePen, but finally I got it to work (the CodePen, not the GSAP animation ): http://codepen.io/anon/pen/pgowvM What I'm trying to achieve, is to animate the captions, or better said, the headings inside these captions. The first slide works fine directly after the page has finished loading (comes into view). But how do I animate the second and the third slide when they come into view. I tried already a lot of things, amongst others the above described. But the solutions are a little bit weird, there must be a cleaner solution. Also: The gsap animations work only once. When I get back to the first slide after visiting the second or the third slider, the animation does not repeat. The carousel effects are bootstrap-, css- and js-based and work without any problem. Could it be that the gsap animation is not working due to bootstrap settings? Maybe the problem lies there. And yes, Blake's example is similar to what I'm looking for, but I got a little confused because of the different slider effects (pushing up instead of fading in). The example which closest fits to my needs is from Carl Schooff: http://www.snorkl.tv/2011/03/bullet-proof-timelinemax-transitions-part-1-jump-to-section/ But don't know exactly how to convert the code into html. I'd be really thankful about any help. Best regards, Pete

Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete