Jump to content
Search Community

Loader: Enter, Loop, Exit!

katerlouis 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

(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

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

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