Search the Community

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.