Jump to content
Search Community

Loop with DevTools

HavasDK 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

Hey guys,

 

I'm creating a banner, which will play 3 times (loop 2), and use GSDevlTools.

 

The bannerflow is like this:

 

Intro, Scene 1, Scene 2, Scene 3, Outro

Scene 1, Scene 2, Scene 3, Outro

Scene 1, Scene 2, Scene 3

 

So after the first loop Intro should be removed,

and the last loop should not play the Outro.

 

My issue here is, that i cannot figure out a way to write the code, so it also works with GSDevTools.

- the final timeline is not showing the correct length.

 

I've tried with 

var master_timeline = new TimelineMax();
master_timeline               
	.add(intro())
	.add(scene1())
	.add(scene2())
	.add(scene3())
	.add(outro())
	.add(scene1())
	.add(scene2())
	.add(scene3())
	.add(outro())
	.add(scene1())
	.add(scene2())
	.add(scene3())
;

But that makes it very messy writing the scenes..

- i cannot use .from at all because, the it conflict with the scenes later on.

 

 

Then i've tried with 

var master_timeline = new TimelineMax({repeat:2, onRepeat:check_replay});
master_timeline
	.add(intro(), "intro")
	.add(scene1(), "+=0.5")
	.add(scene2(), "+=0.5")
	.add(scene3(), "+=0.5")
	.add(outro(), "outro+=0.5")
;
function repeat(){
	master_timeline.remove("intro");
}

Which does not remove the intro.

 

 

Then i've tried

var master_timeline = new TimelineMax({onComplete:repeat});
var loops = 0;
var max_loops = 3;
master_timeline
	.add(intro(), "intro")
	.add(scene1(), "+=0.5")
	.add(scene2(), "+=0.5")
	.add(scene3(), "+=0.5")
	.add(outro(), "outro+=0.5")
;
function repeat(){
    loops++;
    if(loops == 1){
    	master_timeline.remove("intro");	
    } else if(loops >= max_loops){
	master_timeline.remove("outro");
    }
    master_timeline.restart();
}

Which it does not remove any of the labeled scenes, and the GSDevTools timeline, does not show the correct maxtime.

 

I'm really out of solutions, so i would be very happy if any of you guys have a solution, or just a hint which can lead me in the correct way.

 

Best regards

Christian

See the Pen XzoJZr by anon (@anon) on CodePen

Edited by HavasDK
Uploaded codepen
Link to comment
Share on other sites

Hey guys,

 

I've updated the question, with a codepen.

Hope this is good enough, else let me know.

 

This version i've uploaded is a new version, where i've tried setting it up with an intro, middle, end

master_timeline
  .add(intro())
  .add(setup_scenes(true).repeat(1))
  .add(setup_scenes(false))
;

But still with no luck.

 

 

- Christian

Link to comment
Share on other sites

Thanks for the demo. It definitely helped. I found it a bit hard to follow with the conditional logic and naming as someone seeing it for the first time. In the future try using descriptive names for you scenes like moveMan(), moveBall() instead of scene1() and scene2(). It will make it easier for us to decipher.

 

Good job on using functions to return timelines!

 

As you have realized using multiple from() tweens on the same properties of the same object in a timeline can be problematic. Usually this is solved by setting immediateRender:false on all later tweens. However you are using the same function to return identical timelines each time.

 

I think for this a better route is to use tweenTo() and tweenFromTo() to scrub through an existing timeline. So the idea is you create your timelines for each scene once and then scrub through them on multiple replays.

 

here is a very reduced example:

 

See the Pen ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Hey,

 

Thank you very much for your answer, but unfortunately this does not quiet solve my problem.

This code looks very messy, and how would you scale this up to, lets say 100 scenes? - copy paste 4 lines 100 times?

 

And there has to be an intro, which is only called on the first play, and an outro which is not called on the last play.

Please say if my question unclear.

 

I've found a "kind of" solution, which will be removing all the .from tweens, and use .set in the intro, and .to in the scenes.

But thats a bit messy as well, and also add's multiple scene names to the GSDevTools.

 

Christian

Link to comment
Share on other sites

If you wanted to use groups of 3 scenes over and over I'd imagine you would create a function like setup_scene() from your original example and perhaps run a loop that calls it multiple times. I didn't want the basic concept of tweenTo() and fromTo() to get lost in something that complex.

 

Even with that said, I think there is potential for some problems once you add an outro animation that further messes with properties of objects that are being animated in other scenes.

 

I think your latest solution may be the best way forward. If you run into problems please post as simple a demo as possible.

Link to comment
Share on other sites

I know that type of solution, but it does not match up when you're running multiple timelines, like you suggested to set it up.

Since the timeline is setup, on creation, the .call will not work properly.

 

Here is a new way of setting up the banner, but still with some issues, which lays within GSDevTools i guess?

After the first run, the last scene, which should only go to the "outro" label, will be executed much faster.

And the timeline time will be changed to another time.

 

Here is a new codepen.

See the Pen MOxoZo by ChrisPaaDetBeat (@ChrisPaaDetBeat) on CodePen

 

Do you think the GSDevTools is suitable for developing banners?

I have tried 20 diffent ways now i think, but find it really hard to set up a proper template.

 

Christian

Link to comment
Share on other sites

Sorry to hear about the trouble, Christian. I'll need a little time to dig into this further. It's a rather complex beast. Please stand by and I'll get back to you. GSDevTools is definitely great for banner ad development - we've heard from several other banner ad developers who seem to absolutely love it. 

Link to comment
Share on other sites

Alright, I spent several hours looking into this and I've got some things to share. First of all, here's a fork of your demo; the only thing I changed was pointing to new versions of GSDevTools and TweenMax: 

See the Pen ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Some comments: 

  1. GSDevTools basically "records" for the first 2 seconds after it loads, and figures out the duration based on all the tweens/timelines at that point. 
  2. If your goal is to use GSDevTools as a global timeline, you can't really mess with the timeline part-way through. It's a little bit like a movie/video scrubber playing and then when it gets to 75% done, you suddenly remove the last chunk of the video completely and expect the scrubber to still work properly. Not that you're doing something "wrong" - it's just not a good fit for a scrubber tool on a global timeline like GSDevTools. 
  3. You should be able to dynamically update a timeline that's directly wired to a GSDevTools instance, though (not globally synchronized), Like: 
    GSDevTools.create({
       animation: tl, // <- your master timeline instance
       globalSync:false
    });

     

  4. The main reason I had to update GSDevTools and TweenMax (actually, TimelineMax) was that the tweenTo() stuff is tricky; they must update their duration dynamically onStart due to the nature of...well...it'd take a long time to explain, but basically I had to implement fix because this demo exposed an extremely rare scenario where the duration would update incorrectly. 

Hopefully this gives you what you need to charge forward with building your banners and tapping into GSDevTools. Again, instead of defaulting to the global timeline, you might want to set a specific animation instance and turn globalSync off. That'll give you the most flexibility for wiring up the scrubber to a particular timeline, even if it's dynamically updated (to some degree at least).

 

Let me know if things work well for you with the updated TweenMax/GSDevTools. I always like having them tested more in the wild before doing any official release, just in case there's something else that pops up. 

 

Does that help?  

 

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