Jump to content
GreenSock

katerlouis

Loader: Enter, Loop, Exit!

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

(missed you guys :o – some personal issues prevent me from snooping around here .. but I'll be back!)

 

Requirement #1: 

The load-animation may never end right in the middle. Infinite Repeats (repeat: -1) doesn't work for me; So I go the onComplete-way, which checks if the loader needs to go another round or not; if yes, then: tween.play(0). Nice!

 

Requirement #2: 

I need a smooth entry / build up of the looper elements, and a sweet exit. 

I now wonder if this is possible with a single timeline.

 

The pen should make clear what I'm trying to do.

Since the answer to "loopable middle of a timeline" will highly likely be "No!", follow up question:

How do you guys tackle this? I'm always looking for the most robust and compressed way. PJAX navigation is crazy enough on it's own for me. 

 

 

Bam!

See the Pen MvegYv by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

Found a convenient solution myself. Eager to know what you think about it (solution 4 in the pen)

 

loaded = false;
tl
	.from("#box", 1, { x: -50, opacity: 0 })

	.add("loop")
	.to("#box", 1, { rotation: 360 })
	.call(function() {
		if (!loaded) tl.play("loop")
	})

	.to("#box", 1, { x: 50, opacity: 0 })

 

Now I can resolve the promise easily when this timeline triggers it's onComplete. Nice!

 

Another question still, (we don't want this thread to be for nothing, want we?):

tl.play("loop") inside the call; why isn't this.play("loop") working? 

What does "this" refer to in a .call() if not the timeline itself?!

  • Like 2
Link to comment
Share on other sites

Welcome Back! I was wondering what happened to you.

 

45 minutes ago, kreativzirkel said:

What does "this" refer to in a .call() if not the timeline itself?!


If you don't set the scope, it will refer to a delayedCall.

 

From the source code. p is the prototype of a timeline.

p.call = function(callback, params, scope, position) {
  return this.add( TweenLite.delayedCall(0, callback, params, scope), position);
};

 

Link to comment
Share on other sites

And how do I tell .call() that the scope is the current timeline without repeating the timeline var-name again? That's what I'm trying to avoid. I know myself; at some point I rename this timeline and surely forget about the references inside .call() etc. ;)

 

The following doesn't work aswell :F

(grr, this damn thing with these thises ..)

 

tl
.call(funciton() {
	this.play("loop"); // this doesn't work!
}, [], this)

 

Link to comment
Share on other sites

this can definitely be confusing at first. In that case, it would probably be the window.

 

I don't think there is way to do that without using the timeline name. But you see how the source code works.

 

SO DON'T DO SOMETHING LIKE THIS UNLESS YOU KNOW WHAT YOU ARE DOING AND UNDERSTAND THE RISKS

TimelineLite.prototype.myCallback = function(callback, params, scope, position) {
  return this.add( TweenLite.delayedCall(0, callback, params, scope || this), position);
};

////
var foo = {};

var tl = new TimelineMax();

tl
  .myCallback(function() {
    console.log(this); // tl
  })
  .myCallback(function() {
    console.log(this); // foo
  }, null, foo)

 

  • Like 3
Link to comment
Share on other sites

Naaaah, that feels like an overkill just to save myself from remembering to update a variable :D 

What do you think about the loop inside a timeline approach? Are there any caveats I may run into that I don't see yet?

  • Like 1
Link to comment
Share on other sites

Yep. Definitely overkill. If you use functions to create your animations, you really don't need to worry about the name because it will be local to the function.

 

And I don't see a problem with your loop. Does loaded happen even on error?

  • Like 1
Link to comment
Share on other sites

I use barba.js and only change loaded to true when the respective promise gets fulfilled. First time using promises; strange at first, but I guess I'll get the hang of it and start to see the advantages.

  • Like 2
Link to comment
Share on other sites

By the way, the default scope is the tween instance itself (and a call() is just a TweenLite with an onComplete), so if your goal is to target the timeline, you should be able to do: 

tl.call( function() {
    this.timeline.play("loop"); //"this.timeline" will be the tween's parent timeline
});

 

  • Like 6
Link to comment
Share on other sites

Thanks @Carl! Very interesting; clipped this snippet right into Evernote 8)

 

I looked at the examples already @mikel, thanks :)

Or do you want to point my nose on something particular?

 

(grrr– how do you guys make user names subtly clickable in the green style? :D)

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