Jump to content
GreenSock

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

tweenLite|Max and Cycle2 working together

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

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

Link to comment
Share on other sites

I read your question a few times and I'm still pretty confused. Could you narrow your question down to something very specific about GSAP? Unfortunately I've never heard of cycle2 and it looks like they have 174 bug reports still open (https://github.com/malsup/cycle2/issues) and we really can't troubleshoot their code for you, so if you think there's an issue with GSAP it'd be best if you could isolate it in a simple codepen or jsfiddle and post a link here with a detailed description of the issue. We'd love to help.

Link to comment
Share on other sites

  • 2 weeks later...

http://jsbin.com/aFEPAKa/1/edit this is a simple animation using both

 

I am pausing one (cycle) and after run the other one (TweenMax). I want to make with TweeMax a different animation in the in the incoming and outgoing animation of DOM elements, but not during the transition ejecution of the cycle2 plugin

I don't know,TweenMax works perfect, Cycle2 works perfect, but sometimes the h1 (animated with TweenMax) doesn't show propierty, like if a time remaining of the animations never has been cleared. How can I stop all Tweenmax animations to prevent  this issue

Link to comment
Share on other sites

you can try one of the GSAP kill methods:

 

here are the available kill methods:

_________________________________________________________________

 

kill()

 

Kills the animation entirely or in part depending on the parameters.

 

http://api.greensock.com/js/com/greensock/core/Animation.html#kill()

 

//kill the entire animation:
myAnimation.kill();

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

_________________________________________________________________

 

killAll()

 

Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killAll()

//kill everything
TweenMax.killAll();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);

_________________________________________________________________

 

killChildTweensOf()

 

Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf()

<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
</div>
</div>
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});
//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );

_________________________________________________________________

 

killTweensOf()

 

Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

TweenMax.killTweensOf(myObject);

TweenMax.killTweensOf(myObject, {opacity:true, x:true});

_________________________________________________________________

 

You could use any of the above GSAP methods to stop the animation or kills the animation entirely or in part depending on the parameters and what method you use

 

hope this helps!
 

  • Like 1
Link to comment
Share on other sites

Yes, that's it. Now it works like a charm. Thank u  8-) 

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.
×