Jump to content
Search Community

Help me interrupt animation

fatih test
Moderator Tag

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

Hi,


 


I am new to the forms :) but I am a big fan of greensock.


I need to interrupt a animation when a user swipes left or right. So the idea is that the animation begins and goes left and right 2x times.


 


But the user should have the possibility to interupt the animation by swiping left or right. When you swipe now during the animation you get 2 animations at the same time. This is not good. It should somehow kill all the animations in that specific function. ( attention() and attention2() )


 


I use hammer.js for mobile interaction.


 


Sorry for the messy code  :?


 


If you could help me with this I would realy appreciate it.


 


Thanks


See the Pen qNPLwd by fatih_dfk (@fatih_dfk) on CodePen

Link to comment
Share on other sites

Hi fatih,

 

Yep, that does definitely falls under the definition of "messy". Any chance of simplifying that?

 

It really looks like you're are over engineering this a bit. And it looks like you've dumped all the code in there. Spending some time creating a reduced case demo goes a long, long way in helping us help you. The less code you present, the more likely you will get some support from others.

 

Looking at your animation, I am assuming you want something like the following:

 

See the Pen wWANOO?editors=0010 by dipscom (@dipscom) on CodePen

 

It doesn't use swipe gestures but you can see a timeline being interrupted - I'm sure you can adapt into your code. And you can also see how little code is needed to achieve what (I think) is needed.

 

Hope that helps. 

  • Like 1
Link to comment
Share on other sites

Hi Dipscom,

 

Thank you for your reply. I see that you used timelinemax. And tl.kill();. 

 

Can you achieve the same when you use normal Tweenmax in a function? So for example:

function attention() {
    TweenMax.to("#leftSide", slideTime, {x: posleftSide+slide , ease:Power3.easeInOut,force3D:false});
...
..
. etc
}
So I need it to kill only the animations in that specific function. The animation function of the user slide should still working.
 
How can i accomplish this?
Link to comment
Share on other sites

Yes, but you need to expose the Tween as a variable:

var tween = TweenMax.to(el, dur, {params});

function attention() {
 tween.kill();
}

Is there any particular reason you need to have so many tween instances? Wouldn't a simple timeline such as what I showed you suffice? All of those tweens you have in your example are sure to give you a headache sooner or later.

  • Like 1
Link to comment
Share on other sites

It would be better if we used Timeline indeed. But unfortunately we did not and I dont have the time to change it quickly :(

 

But can i use it like this:

var tween = TweenMax.to();

Do I need to fill the el, dur and params?

Link to comment
Share on other sites

function attention() {

var tween = TweenMax();

    tween.to("#leftSide", slideTime, {x: posleftSide+slide, ease:Power3.easeInOut,force3D:false});

...
..
.

}

Something like this?

 

* It does not work :(

Link to comment
Share on other sites

Humm, I'm not sure then, this might be the best approach. If what you are trying to do is salvage some previous work and you can't refactor, you will need a completely different approach.

 

Since you are trying to kill the animation, not stop or transition to something else. Try using TweenMax.killTweensOf(). Have a read into the docs.

 

The premise is that you target the object rather than the tween. Something like:

function attention() {

TweenMax.killTweensOf("#leftSide");

...
}
  • Like 1
Link to comment
Share on other sites

I'm afraid you can't have the whole pie and eat it.

 

A reference to something, GSAP can't really target an object, tween, timeline.

 

Did you read the Docs at all? There's an option to kill ALL tweens or the tweens of children of a particular DOM object. You could use that, then, rebuild whatever it is that you want to animate after the call.

 

However, if you want to kill some tweens but not others, then, you really are going to have to spend some time and refactor your code to that you create variables that are either the tweens in some sort of array or timelines that you can control as a whole.

 

I would vote for you to refactor stuff into timelines with a modular approach.

  • Like 2
Link to comment
Share on other sites

TweenMax.killTweensOf(myFunction) only works if your myFunction was previously called with TweenMax.delayedCall(myFunction)

 

I suggest you read over killTweensOf() ... http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killTweensOf/

When using killTweensOf() you use killTweensOf(myObject) to kill each element based on the ID in each tween.

 

So in your case you could use killTweensOf(), since you can also pass in a string that defines selector text, like "#myID" to kill the tweens of the element with an ID of "myID".

 

You may also pass in an array of targets.:

function killAttention() {
    TweenMax.killTweensOf(["#leftSide", "#rightSide", "#leftWrapper", "#rightWrapper", "#leftSideOverlay", "#rightSideOverlay", "#productInfoRight"]);
    console.log("kill");
}

Or you can use killChildTweensOf() and pass the parent ID of the child tweens

function killAttention() {
   // #main being the parent of all the ID's you have tweens on above
   TweenMax.killChildTweensOf("#main");
   console.log("kill");
}

If this doesnt help then it is best bet is to setup your example without hammer.js and just get the kill() to work right.

 

Try removing the ID's of the tweens you dont want killed.

 

Your example has lots of code.. it is best to just setup a couple of tweens so you can learn how to kill tweens. We don't need all your code, just a simple example so we can kill the tweens you want. This way we can stay focused on the GSAP API and not worry about all the other code you have in your example.

 

Thanks :)

  • Like 3
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.
×
×
  • Create New...