Leaderboard

I'm curious if there's a reason you're not simply nesting timelines. There are a lot of benefits to that, like being able to control the entire thing as a whole, scrubbing forwards or backwards, etc. Have you read this article?: https://css-tricks.com/writing-smarter-animation-code/ For example... var tl1 = new TimelineMax(); tl1.to(...); //add whatever tweens var tl2 = new TimelineMax(); tl2.to(...); //add whatever tweens var master = new TimelineMax(); master.add(tl1); master.add(tl2, "+=5"); //add after 5-second gap You don't have to add an empty tween to create the spacing either, as you seemed to mention in your post. You could just add a callback wherever you want: var tl = new TimelineMax(); tl.to(...); //add whatever tweens tl.add(yourFunction, "+=5"); //adds a function call after a 5-second gap You could use the call() method if you prefer. But if you really want to build things in a callback-driven way, I suppose you could do this: var tl = new TimelineMax({onComplete:function() { TweenLite.delayedCall(5, yourFunction); }}); (Though my personal opinion is that's the least elegant solution) Does that help?

Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:

Hi @fencepencil How about something like this? Does that help? Happy tweening.

For the most part, GreenSock is designed for animations that have known start and end states. With a plinko game the movement of the ball is always changing based on: x velocity, y velocity, gravity, friction and angle of collision with other objects. These types of animations are better suited for a physics engine which is what matter.js is. Your plinko demo uses matter.js and from what I can tell it is the right tool for the job. https://github.com/liabru/matter-js

Hi @elpeyotl and welcome to the GreenSock Forum!~ Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js. Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error. Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97 08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535 openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518 f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538 Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188 dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311 ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627 ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022 Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393 nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916 jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667 Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639 es6.promise.js:97 To just output variable of getBoundingClientRect() width, then use this: var iconBoxRect = iconBox.getBoundingClientRect(); console.log(iconBoxRect.width); Happy Tweening

Hi @elpeyotl, Inline SVG means many lines in the HTML, but is great to work on and looks perfect: Happy masking and tweening ... Mikel

hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!

@jesper.landberg Here is a thread that gets into some of this and may be a good starting place for you Happy tweening!

Hi Jack, Thx for the answer (Im feeling a bit bad/sad to have forget about the possibility to add function into a add hihi). The second one (add) is the one i was looking for. The reason why I don't use nested its because the project is a interactive comic book, where we have 21 section (different from each other) and each section have different scene in it (multiple small animation that don't have influence over others) I've found multiple small timeline easier to work with in my case. The only thing following is the UI-UX and you cant come back from one section to another, even scene are always going forward. its part of the story (multiple ending and every choice you make influence the story and you need to endorse every one of them) Maybe i will use a master for every section. Thx for the article and the answer , have a great day, Alex

Hi @peippo, I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value. You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60. Hope this helps!

Hi @jeb, To illustrate, I've added an onComplete in the middle of your animation, and an onReverse in the Timeline, so that it fires when the scene is redone. Is that what you were trying to do?

Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent

Thank you, that's what I was looking for: D and thanks for the tips.

A for loop - Genius! I think this gives me enough to work with. Now I'm wondering why I didn't think of looping ... Thanks Craig!

If your goal is to sequence several timelines, I personally think it's much cleaner to go with option 1 or 4 because you it gives you a centralized place for control. When you string things together with callbacks, there's no way to really scrub back and forth through the whole sequence or check the overall progress of everything, etc. I mean, it's totally fine to do callbacks if you prefer - I just don't think it's as elegant personally. You can't really reverse everything either (well, you could, but it's a lot more cumbersome). I would STRONGLY recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ To answer your question, here's more pseudo code: //reminder: I personally don't recommend this strategy, as I think it's usually cleaner to nest timelines var tl1 = new TimelineLite(); tl1.to(...); //add whatever animations. var tl2 = new TimelineLite({paused:true}); tl2.to(...); //add whatever animations var tl3 = new TimelineLite({paused:true}); tl3.to(...); //add whatever animations; //when tl1 is done, play tl2 tl1.eventCallback("onComplete", function() { tl2.play(0); }); //when tl2 is done, play tl3 tl2.eventCallback("onComplete", function() { tl3.play(0); }); Here's my recommended approach: var tl1 = new TimelineLite(); tl1.to(...); //add whatever animations. var tl2 = new TimelineLite(); tl2.to(...); //add whatever animations var tl3 = new TimelineLite(); tl3.to(...); //add whatever animations; var master = new TimelineLite(); master.add(tl1).add(tl2).add(tl3); //now you can control everything with master! //jump to the middle of the entire sequence, for example master.progress(0.5); Happy tweening!

There are many ways actually... //after you build out both timelines, simply add tl to start (by default it'll be placed at the end): start.add(tl); //or you could add a delay to tl: tl.delay(start.duration()); //or you could pause tl initially and use an onComplete: start.eventCallback("onComplete", function() { tl.play(0); }); //or you could drop them both into a master timeline, sequenced: var master = new TimelineLite(); master.add(start).add(tl); There are a few other options but I don't want to overwhelm you Does that help?

We do have to keep our support focused on GSAP here. That being said, I made this example as an answer to another forum question and it may help you. It uses pins and triggers a new animation for each panel. Happy tweening.