PointC

PS - you don't have to fork the pen to see this work. Just add a 'Run' button to your pen so can click your storage button and then click Run and the timeline seeks just as you'd expect it to. http://codepen.io/PointC/pen/WrvLar

Hi there , The problem is on line 131 of your Javascript. That section is function act2() - which I've pasted a bit of below. Once you click the session storage link and effectively set that variable to 1 - then you fork the pen with that variable set to 1, but the function has a return if sesSto1 == 1 (which returns a true at this point) so it bails out and never returns that timeline so you get undefined when you try to add act2() to the master timeline. function act2() { var le = new TimelineMax(); le.to($sqare5, 0.1, { autoAlpha: 1, delay: 2 }, "y"); le.to($sqare5, 1, { x: 200, y: 80, z: 0, delay: 2 }, "y"); le.to($sqare6, 0.1, { autoAlpha: 1 }, "ya"); le.to($sqare6, 1, { x: 380, y: 80, z: 0 }, "ya"); le.to($sqare7, 0.1, { autoAlpha: 1 }, "yac"); le.to($sqare7, 1, { x: 560, y: 80, z: 0 }, "yac"); le.to($sqare8, 0.1, { autoAlpha: 1 }, "yach"); le.to($sqare8, 1, { x: 740, y: 80, z: 0 }, "yach"); le.staggerTo($t, 0.5, { autoAlpha: 0 }, 0.5); if (sesSto1 == 1) { sessionStorage.removeItem("abeille"); return; } return le } Just change the last bit to this and it works just fine. No bugs at all. if (sesSto1 == 1) { sessionStorage.removeItem("abeille"); return le; } return le }

I've had those moments many times.

Hey jellevrswk , The console was just throwing an error because orangebutton wasn't defined and many of the variables were assigning themselves to the yellowblock and yellowbutton. I assume because of cutting and pasting each row. You had: var $yellowblock = $('#yellowblock'), $yellowbutton = $('#yellowbutton'), $redblock = $('#yellowblock'), $redbutton = $('#yellowbutton'), $blueblock = $('#yellowblock'), $bluebutton = $('#yellowbutton'), $greenblock = $('#yellowblock'), $greenbutton = $('#yellowbutton'), $greenblock = $('#orangebutton'), $greenbutton = $('#orangeblock'); Just fix the variable assignments... and you should be all set: var $yellowblock = $('#yellowblock'), $yellowbutton = $('#yellowbutton'), $redblock = $('#redblock'), $redbutton = $('#redbutton'), $blueblock = $('#blueblock'), $bluebutton = $('#bluebutton'), $greenblock = $('#greenblock'), $greenbutton = $('#greenbutton'), $orangebutton = $('#orangebutton'), $orangeblock = $('#orangeblock'); http://codepen.io/PointC/pen/VeLVEz?editors=101

I didn't see any console errors either until I forked the pen. If you do like the OP is suggesting in Post #15 - click the button and then fork the pen, as soon as the animation starts in the new forked pen the following error does come up in the console. Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. d.add @ TweenMax.min.js:14 master @ pen.js:119 (anonymous function) @ pen.js:126 n.event.dispatch @ jquery.js:4430 r.handle @ jquery.js:4116

Hi C.Surieux , You can change the perspective of the doors by changing the transform perspective. You currently have it set to 800, but you can crank it up to your liking. Just change the last line of your CodePen to something like: CSSPlugin.defaultTransformPerspective = 2500; Hopefully that looks better to you.

Maybe it should be exploding snow. I'd watch that demo.

Hi Regis , I'm not sure if this is exactly what you mean, but I just flipped your timeline a bit starting with the bar animation and then overlapping the staggered text. I didn't do any calculations so the letters may not be a perfect match to when the bar hits their x position, but that is happening so fast, I'm not sure anyone would notice. You can probably get the bar position and calculate the position of each letter and get that all perfectly synchronized, but that seems like a lot of work for such a fast animation. I just eyeballed the overlap time in my example. If you need more precision to make it absolutely perfect, I'm sure some of the mods can help you. Hopefully this helps a bit. http://codepen.io/PointC/pen/vLOKMj

Hi DeanBDean , I think the answer you're looking for is in this thread: http://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/ Hopefully this helps. If not, I'm sure the super smart mods will be along shortly. Happy tweening.

Sounds good. I'll stay with immediateRender:false, but it was nice to learn that I can add that play() inside the add() method. That could come in handy.

Hey Carl , Thanks very much. Yes that makes sense - the timelines in the functions have no idea what they'll be used for so they have a mind of their own upon creation. So... in my demo, the repeats work because the nested timelines now "know" they're part of a master timeline. Would you say adding the nested timelines in an un-paused state would be a better solution than adding an explicit immediateRender:false to set()s at time zero?

Hey everyone , I post this not so much as a problem, since the solution is easy, but more as a curiosity and a bit of help to anyone else that may see this nested timeline behavior. I’ve created a master timeline via four nested timelines in functions. The first timeline tween of each nested timeline is a set() call. On the first pass through the master timeline, each nested set() at time zero fires at time zero of the master timeline – not time zero of the local timeline. This is easily corrected by applying immediateRender:false to the set() calls. My guess is that when the master timeline is created, all the set()s at position zero of the nested timelines are fired as they become relative to the master timeline of zero? @ Jack – I won’t even pretend to understand many of the things under the hood, but I was reading this post in which you said: 'That's one of the reasons we have the "set()" convenience method in TimelineLite and TimelineMax - it creates a zero-duration tween but it automatically sets immediateRender:false unless you're inserting it at the current time.' I totally understand that and the first set() of the first nested timeline is essentially at time zero of the master timeline so it should and does fire immediately, but I’m mostly curious about why the repeats of the master timeline all play as one might expect – each nested set() at local time zero wait their turn without having to apply an immediateRender of false. At any rate, this is not too big of a deal and easily solved by explicitly setting the immediate render . As I said, it’s more curiosity and for any future forum searchers with questions about it.

I have a pretty good understanding of them, but .from tweens just bug me. I'm always using .set() and .to() tweens. Though, I think if you can get the .set() clearProps working correctly, you should be alright. I assume you've seen Carl's video? I wish I could be more help, but I'm sure the big guns will be along shortly to set us straight.

Hi celli , I was looking at your pen and something was odd. You already know that you have those pesky 'from' tweens because you're trying to clear the props which is good. I stared at your pen for bit and could not figure out why the .set() for clearProps wasn't working so I forked your pen and deleted everything down to two simple boxes. On the first timeline function, the blue box moves, red on the second. Super simple - easy to test. I set the background to change color on each animation so there was no question about what I was seeing. When the blue box moves, the background should be yellow and when the red box moves the background should be black, but my .sets would not work either. I don't have a complete answer for you, but here's what I've noticed. The first set() is ignored on the first pass through the master timeline. It immediately grabs the set() from the second timeline and uses that so I see both boxes moving on black to start and then everything starts working correctly after that. However, if you give the .set a specific time other than 0, it works on the first pass (and all subsequent passes). .set(".container",{backgroundColor:"yellow"},.001) Take a look at my pen: http://codepen.io/PointC/pen/BjamgB If you un-comment the two .sets() without a specific time, you see the same odd behavior that your pen is exhibiting. I don't know if this is the intended behavior with placing sets() into timeline functions? I'm sure Jack, Carl or the mods can answer that. Maybe we're supposed to use sets() only on the master timeline or an onComplete function, or give it a specific time label? In your pen, it looks like it completely ignores your entire first timeline on play 1 and jumps immediately to the second one where you set the background to red. In any case, I think you'll need to give those .sets() in your pen a specific time to clear the props. Hopefully, the big guns can give us an answer on this one. I hope this helps a bit.

Hi m6246 , This is from the docs: By default, whenever a TweenLite instance renders for the first time (after any delay), it analyzes all other active tweens of the same target and checks for individual overlapping properties. If it finds any, it kills the offending overlaps (again, only the individual properties). This overwrite mode is called "auto" and it is typically the most intuitive. You can read more here: https://greensock.com/get-started-js#overwriting You should also check out the position parameter demos for more information: http://greensock.com/position-parameter Happy tweening

Hey there OneManLaptop , I took a quick look at your pen and it looks like the strange scrolling is caused by your scrollTo position coming from an incorrect offset. You're animating to an offset position, but the offset is changing on each animation. When you click 'two' it scrolls to the second panel, but if you click 'two' again it scrolls back to one because you're asking it to scroll to the new offset of two which is now 0. I'm sure one of the mods will be by shortly and point you in the right direction on your pen.

I almost forgot - you can also use this if you need all the coordinates: var p = scale1.getBoundingClientRect(); console.log( p.top, p.right, p.bottom, p.left)

Hi flysi3000 ; I think this post can answer your questions about animating symbols. http://greensock.com/forums/topic/12232-svg-symbols-rendering-issues-in-chrome-and-ie-on-windows-7-sp1-x64/

Hi there sorciereus , Try these: if(scale1.offset().top === 0) { minimizeShoe(); } if(scale1.position().top === 0) { minimizeShoe(); } if(scale1.offsetTop === 0) { minimizeShoe(); } The first two are jQuery and the third is plain JS. The jQuery position() and offset() only return left and top properties. }

Hi Technics1210 , I took a slightly different approach to your train. It may make things easier for you. http://codepen.io/PointC/pen/bEbvwP Hopefully this helps. Happy tweening.

Interesting. If you have a couple free minutes, I'd still recommend making a CodePen so others can see the bug. Maybe there's an easy answer - maybe not. Either way, it could help anyone else coming across the same problem. Edit: PS Jonathan is the forum expert on Firefox. I'm sure he'll read this and probably have some additional info as well.

Hi Lauren Johnson , I'm not sure what you mean by 'not working', but there have been some discussions about some Firefox bugs: Here's one thread: http://greensock.com/forums/topic/11064-drawsvg-does-not-fully-draw-path-in-ff/ That thread may help, but if you'd create a CodePen so everyone could see your code in action, that would get you the best answers. Check this out: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening

PS - @flash08 When you read these answers, you should also read this thread: http://greensock.com/forums/topic/10357-text-news-ticker-animation-is-not-smooth/ It has a good discussion of getting the ticker to run smoothly in all browsers. In particular, you'll see Jonathan has set the z rotation on his pen to 0.01 to help with this.

Hey Diaco - awesome as always. That's really cool that it only has 3 lines of JavaScript. I look at some of your pens and think "It can't possibly be that easy" , but there it is working beautifully every time.

Hi flash08 The amazing Jonathan has a CodePen doing just what you need: http://codepen.io/jonathan/pen/vDhKE?editors=001 Happy tweening.