Jump to content
Search Community

Yoyo not working

Iamattamai 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

I'm somewhat new to GSAP but have been studying intensely - and don't come here without first researching, but...

I can't seem to get yoyo/repeat to work on the below, seemingly simple function - it only plays through once forward.

I didn't make a Codepen because I think it's either my poor understanding of the syntax or function.

I'm simply trying to cycle a short array of .pngs in yoyo fashion multiple times. Only CSS is to make all image visibility = hidden initially.

dur = .5;
stand01 = document.getElementsByClassName("gest06stand");

function stand(){
var tl015 = new TimelineLite({repeat:25,yoyo:true});
tl015.staggerTo(stand01,0,{visibility:'visible'},dur)
tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},dur,dur);
return tl015;
}

master = new TimelineLite();
master
.add(stand())

Thanks in advance for your help.

Link to comment
Share on other sites

Okay, feeling a little silly about that, but still not in the clear.

I loaded TimelineMax.min.js between two script tags in my header (where I had TimelineLite) and I'm getting:

 

 Uncaught ReferenceError: TimelineMax is not defined

 

Perplexed, this should be simple. I tried the uncompressed as well, same thing.

This is the line it doesn't like:

master = new TimelineMax();

Laughing at myself at this point.

Link to comment
Share on other sites

If I can trouble you one more time and I think I'm on the home stretch...

I have created 3 functions and a master timeline below.

The second function in the attached code is nearly identical to the other two.

I have added them into the master timeline but for some reason the second function wants to start running right away instead of in sequence after the first.

The third acts properly as expected in sequence.

I know I can add a delay, but that seems like a workaround to me and one more thing I need to update as values change.

images = document.getElementsByClassName("gest06")
stand01 = document.getElementsByClassName("gest06stand");
durtalk = .08
dur = .03

function armUp(){
var tl01 = new TimelineMax({});
tl01.staggerTo(images,0,{visibility:'visible'},dur)
.staggerTo(images,0,{visibility:'hidden',immediateRender:false},dur,dur);
return tl01;
}

function stand(){
var tl015 = new TimelineMax({repeat:20,yoyo:true});
tl015.staggerTo(stand01,0,{visibility:'visible'},durtalk)
tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},durtalk,durtalk);
return tl015;
}
function armDown(del){
var tl02 = new TimelineMax({});
tl02.staggerTo(images,0,{delay:del,visibility:'visible'},-dur)
.staggerTo(images,0,{delay:del,visibility:'hidden',immediateRender:false},-dur,dur)
return tl02;
}
master = new TimelineMax();
master
.add(armUp())
.add(stand())
.add(armDown(),"-=.05")

 

Link to comment
Share on other sites

I've gone to that link "How to Create a CodePen Demo" and I can't see where it's telling me how to do anything but see how the utilities and plugins work.

Is there supposed to be a template or instructions or am I starting from scratch?

I am cycling through 20+ images so I need to put those on AWS I suppose?

 

If it helps...

What I'm doing is a sort of controllable animated GIF using pngs as frames - I'm staggering to show then hide frame by frame.

First the character raises his arm, then moves lips  in place repeated, then first sequence is reversed to lower arm.

If there's a better way to do it, I'm open to suggestions.

I had thought of a visibility=on stagger with an onComplete to then hide each frame but found someone else doing it this way which mostly works.

Link to comment
Share on other sites

I see. That sounds more like a sprite-sheet animation. For that I'd probably go with a backgroundPosition and stepped ease. There are a bunch of threads about that. Here's a good one:

I don't see anything in your code that would cause the second timeline on the master to start immediately. (Just FYI — the immediateRender:false is not necessary for the .to tweens). That's why I'd like to see demo. It doesn't have to be all your actual assets. Just some plain divs is fine. Here's a starter with your code pasted into the JS panel. You can fork this and drop in some divs as placeholders for the actual elements. 

 

See the Pen QRbxLQ by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

I meant to come back to thank you again Craig.

Your comment regarding the ImmediateRender:false being unnecessary turned out to be the key.

I removed it and all worked as it should.

 

I had already researched the link you provided but there are several reasons a sprite sheet wouldn't work well for this project that I won't bore you with.

Thank you again - you saved me hours of time.

  • Like 2
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...