Jump to content
Search Community

Overwrite - kill Tweens

BarryS 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

Hello,

 

Here's the scenario:

 

I create e-Learning and in the past I have used simple jQuery to show and hide divs when buttons are clicked. I'm still doing this, but I'm now using TweenMax to add some nice animation.

 

My problem is that if you click the buttons quickly in turn I get an animation build up. I would like only the last animation to finish, before the last button click animation starts. I've tried using Overwrite, but nothing seems to effect it.

 

You may ask "But why would a user go click happy on the buttons?". But that just what some people do.

 

Here's my jQuery and TweenMax code:

 

var tl = new TimelineMax;

$(document).ready(function() {

 $("#Person001_btn").click(function() {
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person001, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});  
 });

 $("#Person002_btn").click(function() {	  
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person002, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
 });

 $("#Person003_btn").click(function() {
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person003, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
 });

 $("#Person004_btn").click(function() {
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person004, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
 });

 $("#Person005_btn").click(function() {
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person005, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
 });

 $("#Person006_btn").click(function() {
 tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
 tl.to(Person006, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
 });

});

 

And if it helps, here is the HTML:

 

<div class="PeopleThumbContainer" id="PeopleThumbContainer">
  <div class="Person"> <a href="#" class="Person" id="Person001_btn">
	<p>Janine<br />
	  Cost Centre Manager<br />
	  Capita Symonds</p>
	<img src="images/people/person_001.jpg" /></a></div>
  <div class="Person"> <a href="#" class="Person" id="Person002_btn">
	<p>Barry<br />
	  Web developer<br />
	  Capita L&D</p>
	<img src="images/people/person_002.jpg" /></a></div>
  <div class="Person"> <a href="#" class="Person" id="Person003_btn">
	<p>Reginald<br />
	  Consultant<br />
	  Capita IB Services</p>
	<img src="images/people/person_001.jpg" /></a></div>
  <div class="Person"> <a href="#" class="Person" id="Person004_btn">
	<p>Lisa<br />
	  Cost Centre Manager<br />
	  Capita Symonds</p>
	<img src="images/people/person_001.jpg" /></a></div>
  <div class="Person"> <a href="#" class="Person" id="Person005_btn">
	<p>Nigel<br />
	  Cost Centre Manager<br />
	  Capita Symonds</p>
	<img src="images/people/person_001.jpg" /></a></div>
  <div class="Person"> <a href="#" class="Person" id="Person006_btn">
	<p>Sarah<br />
	  Cost Centre Manager<br />
	  Capita Symonds</p>
	<img src="images/people/person_001.jpg" /></a></div>
</div>
<div class="PeopleContainer" id="PeopleContainer">
  <div class="Introduction" id="Introduction"><a name="maincontent" id="maincontent"></a>
	<p>What do people like about working in Capita? What are the benefits of working for such a large organisation?</p>
	<p><strong>Select the employees on the right</strong> to see what they have to say about things?</p>
  </div>
  <div class="PeopleContent" id="Person001"> <img src="images/people/person_001_big.png" />
	<div class="text">
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
  </div>
  <div class="PeopleContent" id="Person002"> <img src="images/people/person_002_big.png" />
	<div class="text">
	  <p>Text 2</p>
	</div>
  </div>
  <div class="PeopleContent" id="Person003"> <img src="images/people/person_001_big.png" />
	<div class="text">
	  <p>Text 3</p>
	</div>
  </div>
  <div class="PeopleContent" id="Person004"> <img src="images/people/person_001_big.png" />
	<div class="text">
	  <p>Text 4</p>
	</div>
  </div>
  <div class="PeopleContent" id="Person005"> <img src="images/people/person_001_big.png" />
	<div class="text">
	  <p>Text 5</p>
	</div>
  </div>
  <div class="PeopleContent" id="Person006"> <img src="images/people/person_001_big.png" />
	<div class="text">
	  <p>Text 6</p>
	</div>
  </div>
</div>

 

Thanks is advance.

 

Barry

Link to comment
Share on other sites

If I understand your goal correctly, here is some simplified JS code for you that should accomplish the task:

 

var tl = new TimelineLite();

function animateButton(btn) {
   tl.clear(); //kills all the tweens in the timeline and empties it.
   tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut});
   tl.to(btn, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut});
   tl.restart();
}

$(document).ready(function() {

 $("#Person001_btn").click(function() {
       animateButton(Person001);
 });

 $("#Person002_btn").click(function() {     
       animateButton(Person002);
 });

 $("#Person003_btn").click(function() {
       animateButton(Person003);
 });

 $("#Person004_btn").click(function() {
       animateButton(Person004);
 });

 $("#Person005_btn").click(function() {
       animateButton(Person005);
 });

 $("#Person006_btn").click(function() {
       animateButton(Person006);
 });

});

  • Like 1
Link to comment
Share on other sites

Thanks for the link Randall... I'll definitely check it out for the tips and tricks.

 

And thank you GreenSock! You are a star. Looking at your simplified code make is look so simple. So its tips like this that will make a me a better coder. I really must get into the habit of writing functions instead of long drawn out inferior code!

 

Thanks again guys, your help and tips are invaluable.

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