Don't use reserved properties!

[swampthang 133 Likes (Specialist)]

This isn't so much a question as it is a warning. If I had hair I would've pulled it all out by now. I was working on a way to use TimelineMax to trigger separate videos to play in sequence as well as follow a scrub bar. Needed to start and/or stop video clips at any point in the video and then trigger the next one to simulate someone doing a video edit - where they might drag in the edges only exposing certain parts of the video's timeline. So, I just set up a simple array of objects with properties that I could store and retrieve at any point like this:

vidArr = [
  vid1 = {el: document.getElementById('vid1'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false},
  vid2 = {el: document.getElementById('vid2'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false},
  vid3 = {el: document.getElementById('vid3'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false}
];

If you look closely you'll see I named one of the properties delay which was as dumb as it gets. Rather than doing much in the way of tweening, I'm just using TimelineMax to trigger opacity, start and end times on the video objects. There is a quick opacity tween at one point but mainly just to keep the first video from flashing on replay.

 

Here's what it looked like:

for( let vid of vidArr ) {


  var tl = new TimelineMax({onStart:startVideo, onStartParams:[vid.el]});


  tl.set(vid.el, {currentTime:vid.startAt, immediateRender:false}, 0)
    .set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0)
    .to(vid.el, 0.2, {opacity:1, immediateRender:false}, 0)
    .set(vid.el, {opacity:0, immediateRender:false}, vid.endAt)
    .set(vid, {active:false, immediateRender:false}, vid.endAt);


  vid.delay = masterTL.duration();
  masterTL.add(tl,vid.delay);
}

There are 3 videos and each one is 10 seconds or under. The first 2 added up to 17.2 seconds. Everything was good until it got to the last time through the loop and right after this...

.set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0)

...where it was ending up being like 34 seconds long instead of 22 or so. Even though I was telling it to set a value on the delay property for vid it was setting it as a delay property for the timeline itself. Sometimes I surprise myself at how long I can stare at something and not see it.

 

Anyway, don't use reserved properties for your custom objects! I renamed the property to wait and all started working.

 

I do have one quick question though. Should it be necessary for me to add immediateRender: false in all those places? I tried to figure out a way to set that once in that glob of set's and to's but it would always break.

 

Anyway, if anyone is looking for a way to accomplish this, it's working in the codepen.

 

 

See the Pen MpWvpq by swampthang (@swampthang) on CodePen

[GreenSock 13,476 Likes (Superhero)]

 

As for immediateRender:false, it's only true by default in these cases:

• on a timeline.set() that's at the very beginning of a timeline (startTime:0). If it's anywhere else on the timeline, immediateRender will be false.
• any from() or fromTo() tweens
• on a loose (not timeline-based) set() call

You should never have to set immediateRender:false on a to() tween. Ever. That's the default (well, unless the duration is 0 for obvious reasons).

 

In practical usage, it should rarely be necessary to set immediateRender:false.

[swampthang 133 Likes (Specialist)]

Finally got it all working. Thanks for the input, Jack!

[OSUblake 14,196 Likes (Superhero)]

Here's another reserved keyword that might not be so obvious, data.

 

In this

See the Pen EZNMEZ by osublake (@osublake) on CodePen

I'm using SVG path data inside canvas, so data seemed like a good name to use for my path objects. Nope! I was positive my code was correct, but it wouldn't work, so I had to call in to GreenSock's super secret support hotline to figure the problem out.  

 

I knew data existed, but never used it so it was really easy to overlook.

[swampthang 133 Likes (Specialist)]

Wow, Blake. That makes me feel so much better. Of course, data is a lot more obscure than, uh  - delay!