Search the Community

take a look at my lab: http://camal3on.globat.com/js/ I try to work with cycle2 and TweenMax, I can not check that at the break (cycle-on-hover: pause) TweenMax stops, either by using the pager, the slider goes crazy! Sorry, this is my very big code: // GSAP : function callGSAP(curr,nxt){ var tl = new TimelineMax({onStart:doSome,onComplete:someDone,repeat:1,repeatDelay:2,yoyo:true}); var currBnr = $('.cycle-slide:eq('+curr+')'); var nxtBnr = $('.cycle-slide:eq('+nxt+')'); tl.set(currBnr, {visibility:'visible',delay:1.5}) .fromTo("h1", 0.5, {left:100,autoAlpha:0},{left:0,autoAlpha:1}) .fromTo("h2", 0.5, {left:-100,autoAlpha:0},{left:0,autoAlpha:1},"-=0.25") .fromTo(".featured", 0.5,{scale:0.5,autoAlpha:0},{scale:1,autoAlpha:1,ease:Bounce.easeOut},"feature") .fromTo(".description",0.5,{left:100,autoAlpha:0},{left:0,autoAlpha:1},"feature+=0.25") .staggerFromTo(".nav div", 0.5, {scale:0, rotation:-180, autoAlpha:0},{scale:1, rotation:0, autoAlpha:1}, 0.2, "stagger"); } function doSome(){ $('#status span').text('starting to do something'); } function someDone(){ $('#status span').text('completed'); $('#status2 span').text('continue Cycle2 ...'); $('.cycle-slideshow').cycle('resume'); } // CYCLE2 : var slideshow = $('.cycle-slideshow'); slideshow.on( 'cycle-bootstrap', function( e,opts ) { $('#status2 span').text('INITIALIZE >> '+e.type); // $('#print').empty().html(printObj(opts)); }); slideshow.on( 'cycle-before', function( e,opts,outEl,inEl,fFlag ) { $('#status2 span').text('>> '+e.type+', '+fFlag); // $('#print').empty().html(printObj(opts)); $('.cycle-slideshow').cycle('pause'); callGSAP(opts.currSlide,opts.nextSlide); console.log(opts.currSlide,opts.nextSlide,opts.slideNum,opts.slideCount); }); slideshow.on( 'cycle-after', function( e, opts ) { var next = slideshow.data("cycle.opts").nextSlide; // playBanner(next); if ( !slideshow.is('.cycle-paused') ){ // goTimer(opts.timeout); } $('#status2 span').text('cycle-after next '+next); // cycle-initialized }); slideshow.on( 'cycle-paused', function( e, opts ) { $('#status2 span').text('cycle-paused'); }); slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) { $('#status2 span').text('cycle-resumed '+timeoutRemaining); }); Something else to add ... I had to use yoyo, but I really would love that on entering the slide, GSAP animation 1 and leaving the slide, another different animation