Jump to content
GreenSock

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

yoyo does not yoyo

Recommended Posts

I load in like 10 photo's (img tag with class="photo".

They to appear 1 after the other opacity from 0 to 1.

Works OK.

I want my timeline to yoyo infinitly.

But at the end of the first run it stops.

What am I doing wrong:

function init(){
	var mainTL = new TimelineMax({repeat:-1, yoyo:true});
	mainTL.add( intro() );
}

function intro(){
	TweenMax.set(".photo", {xPercent:-50, yPercent:-50, opacity:0});
	TweenMax.staggerTo(".photo", .5, { opacity:1	}, 1);
}

init();

I know I could this, but then the sequence runs in the same order instead of reversed:

TweenMax.staggerTo(".foto", .5, { opacity:1}, 1, intro);
Link to comment
Share on other sites

There is a little problem with your code. When you do

mainTL.add( intro() );

You are just calling the intro() function which creates a TweenMax.set() and TweenMax.staggerTo(), those tweens are not being added to the timeline. Those tweens are just running on their own. To test this you could try adding after the add()

console.log (mainTL.duration()) // 0

The trick is that your intro function needs to return a single tween or timeline of tweens. So the fix for your code is

function intro(){
  var tl = new TimelineLite();
   tl.set(".photo", {xPercent:-50, yPercent:-50, opacity:0});
   tl.staggerTo(".photo", .5, { opacity:1 }, 1);
  return tl;
}

Here is some code that illustrates add()-ing 3 timelines into a master timeline using the "functions that return a timeline" technique:

 

//these functions return timelines
function box1() {
  var tl = new TimelineLite();
  tl.to("#box1", 1, {rotation:360})
    .to("#box1", 1, {opacity:0})
  return tl;  
}


function box2() {
  var tl = new TimelineLite();
  tl.to("#box2", 1, {top:100})
    .to("#box2", 1, {opacity:0})
  return tl;  
}


function box3() {
  var tl = new TimelineLite();
  tl.to("#box3", 1, {rotation:-360})
    .to("#box3", 1, {opacity:0})
  return tl;  
}


var masterTimeline = new TimelineMax({repeat:300, yoyo:true, repeatDelay:1});


masterTimeline.add(box1())//starts at time of 0
.add(box2(), 0.5)//starts at 0.5 seconds
.add(box3(), 1)// starts at 1 second
.from("#progress", masterTimeline.duration(), {scaleX:0, transformOrigin:"left center"}, 0)// starts a time of 0 and its duration matches that of the timeline it is in.

Live demo: http://codepen.io/GreenSock/pen/epILr?editors=001

  • Like 3
Link to comment
Share on other sites

Thanks Carl!
 

@a single tween or timeline of tweens.

 

In Flash I normally would instantiate a new TweenMax.

But this is not possible in GSAP.

So:

var tw = new TweenLite(); //or TweenMax()
tw.set(".foto", {xPercent:-50, yPercent:-50, opacity:0}); //handles all vendor prefixes of translateX(-50%) translateY(-50%)
tw.staggerTo(".foto", .5, { opacity:1 }, 1);
return tw;

does not work.

 

Now I would conclude I always have to use a Timeline instead of a Tween?
But surely I am wrong? :mellow:

Link to comment
Share on other sites

Hi Cor,

 

Yes, if you want multiple animations sequenced you will need to use a TimelineLite or TimelineMax.

Also keep in mind that a method can only return 1 thing. It seems in your code you are trying to call multiple methods on a singular TweenLite instance which is going to be problematic.

 

For instance, in your code you are saying that tw is a TweenLite instance.

 

If you try to do:

var tw = new TweenLite(); 

That will throw errors in Flash as the TweenLite constructor expects 3 arguments (target, duration, vars), JavaScript will also compain, "Uncaught Cannot tween a null target."

 

You can not call set() on a TweenLite instance because it is a static method of TweenLite.

 

bad:

myTween.set(el, {x:200})

good

TweenLite.set(el, {x:200})

Lastly TweenLite does not have a staggerTo() method. So TweenLite.staggerTo() nor tw.staggerTo() will work.

 

I really think my suggestion of creating and returning a TimelineLite is what will work best for you:

function intro(){
  var tl = new TimelineLite();
   tl.set(".photo", {xPercent:-50, yPercent:-50, opacity:0});
   tl.staggerTo(".photo", .5, { opacity:1 }, 1);
  return tl;
}

Perhaps if you made a basic CodePen demo, it would help me see why that isn't working. (instructions)

 

Also, for a little trip down memory lane, this technique is very similar to what was used in my old Flash OOP tutorial

WARNING old-school AS3 code 
public function animateIn():TimelineLite {
  var tl:TimelineLite = new TimelineLite();
  tl.insert(new TweenLite(this, .5, {autoAlpha:1}));
  tl.insert(TweenLite.from(this, 1, {x:"400", blurFilter:{blurX:50}}));
  return tl;
}


public function animateOut():TimelineLite {
  var tl:TimelineLite = new TimelineLite();
  tl.append(new TweenLite(this, .5, {autoAlpha:0}));
  tl.insert(TweenLite.to(this, 1, {x:"-600", blurFilter:{blurX:80}}));
  return tl;
}
Link to comment
Share on other sites

THANKS Carl,

 

Yes I know of the params, it was just an example of creating instances.

And you point me exactly to my spot.

Very-old-Flash-school... :shock:

 

I found this one too:
http://www.snorkl.tv/2011/06/as3-oop-case-study-build-a-ferris-wheel/#more-1035

 

Old man with old habbets...
So you are going to get a lot of "trouble" with me.
Whoahahahaha.

  • Like 1
Link to comment
Share on other sites

Carl,

 

I do have it working, but i am just extending it to get more "skills" with GSAP.

 

I can create a codepen, but can I use PHP in there?
Because all my data is loaded from reading directories and/or a database.

I even load all greensock js in with 1 PHP statement and accept a few Kb extra.

In case of no-PHP I have to consider rebuilding it to HTML, which is really a lot of double work.

 

Thanks again!!!

Link to comment
Share on other sites

No, I don't believe PHP is going to work. 

 

CodePen excels at providing reduced test cases. When providing support we really have no interest in seeing the real production code as 99% of it has nothing to do with the problem. In most cases a problem or question related to GSAP can be replicated without any back-end dependencies or external files. 

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