Jump to content
Search Community

Animation build up - should I use labels instead?

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 all,

 

I have a faily simple slideshow (see attached files) that is controled by back and next buttons. At the moment it works fine until you click the buttons quickly and get animation build up. I know users will do this and though its not a major issue I'd like to try and fix it.

 

I'd like to be able to use labels to jump to the corresponding part of the Timeline after the current set of Tweens have finished.

 

I've tried using the Bullet-Proof TimelineMax Transitions example here but I'm struggling.

 

http://forums.greensock.com/topic/6349-bullet-proof-timelinemax-transitions/

 

Thanks in advance.

 

Sorry if my example looks pretty lame but I had to take out the nice imagery as I do not have permission to upload it anyhere other than its intended final delivery.

 

Thank you,

 

Barry

animation_build-up.zip

Link to comment
Share on other sites

I used an example that Jack gave me before and it works. I'm wary that in this case it may use up lots of memory to tween everything at the same time even though the divs aren't actually visible.

 

Does tweening divs that arent actually visible still use up memory? I'm trying not to have stuttery tweens. They look great to me, but I'm thinking of users with older machines with less RAM.

 

var counter = 1;
var tl = new TimelineLite();

function animateSlides(SlideLeftIn, SlideRightIn) {
   tl.clear(); //kills all the tweens in the timeline and empties it.
tl.appendMultiple( [TweenLite.to([LeftSlide001, LeftSlide002, LeftSlide003, LeftSlide004, LeftSlide005], 1.25, {css:{left:"-490", autoAlpha:0}, ease:Power2.easeInOut, delay:0} ),
				 TweenLite.to([RightSlide001, RightSlide002, RightSlide003, RightSlide004, RightSlide005], 1.25, {css:{right:"-490", autoAlpha:0}, ease:Power2.easeInOut, delay:0} ) ]);
   tl.appendMultiple( [TweenLite.to(document.getElementById(SlideLeftIn), 1, {css:{left:"0", autoAlpha:1}} ),
				 TweenLite.to(document.getElementById(SlideRightIn), 1, {css:{right:"0", autoAlpha:1}} )]);
   tl.restart();
}
function showNext() {
if (counter == 1) {
 animateSlides('LeftSlide002', 'RightSlide002');
 TweenLite.to(BackButton, 0.25, {css:{autoAlpha:1}});
 $("#pageNum").html("2");
 counter++;
 }

else if  (counter == 2) {
 animateSlides('LeftSlide003', 'RightSlide003');
 $("#pageNum").html("3");
 counter++;
 }

else if  (counter == 3) {
 animateSlides('LeftSlide004', 'RightSlide004');
 $("#pageNum").html("4");
 counter++;
 }

else if  (counter == 4) {
 animateSlides('LeftSlide005', 'RightSlide005');
 TweenLite.to(NextButton, 0, {css:{autoAlpha:0}}),
 TweenLite.to(NextButton2, 0, {css:{autoAlpha:1}});
 $("#pageNum").html("5");
 counter++;
 } 

}
function showPrev() {
if  (counter == 2) {
 animateSlides('LeftSlide001', 'RightSlide001');
 TweenLite.to(BackButton, 0.25, {css:{autoAlpha:0}});
 $("#pageNum").html("1");
 counter--;
 }

else if  (counter == 3) {
 animateSlides('LeftSlide002', 'RightSlide002');
 $("#pageNum").html("2");
 counter--;
 }

 else if  (counter == 4) {
 animateSlides('LeftSlide003', 'RightSlide003');
 $("#pageNum").html("3");
 counter--;
 } 

else if  (counter == 5) {
 animateSlides('LeftSlide004', 'RightSlide004');
 TweenLite.to(NextButton, 0, {css:{autoAlpha:1}}),
 TweenLite.to(NextButton2, 0, {css:{autoAlpha:0}});
 $("#pageNum").html("4");
 counter--;
 } 
}

Link to comment
Share on other sites

Does tweening divs that arent actually visible still use up memory?

 

The biggest hit on animation performance is the browser's rendering speed. If the divs have visibility:hidden set (as autoAlpha will do) I really wouldn't worry about it at all unless you had 100s of divs animating. Chances are if the user is clicking fast, most of the divs will have had their autoAlpha already tweened to 0 and thus the tween that is tweening multiple divs to autoAlpha:0 isn't going to cause much harm.

 

I just looked at your files. VERY NICE.

I haven't dug into the code though. One thing to mention is that the BulletProof transitions work on the concept that there should not be any buildup. If a transition starts and the user clicks a bunch of buttons, when the currently running transition ends there is always a routine that runs to see what the most recently requested "section" was and then it jumps over to that section.

 

For instance if section 1 is animating out and the user clicks the next button 4 times during that transition... when the transition ends, the "system" will know it should jump immediately to section 5's intro animation.

 

Again, congrats on the slick looking presentation. Very impressive

Link to comment
Share on other sites

Hi Carl,

 

Thanks for your reply. Its handy to know that it shouldnt effect the browser's rendering speed due to the divs being set to visibility:hidden.

 

I cant imagine i'd be using more than 20 divs or so.

 

In the code i showed above (but not the original dowload) it now finishes the last tween before jumping to the correct one (so i'm happy).

 

Also, thanks for the praise... its much appreciated :)

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