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.

You obviously have a few custom properties mixed in with real properties of elements. Let's say you created a generic way for both TweenMax and your users to register custom properties on a target object before calling a tween. Maybe it would share a little code throughout the user's application and TweenMax library that way. Plus you could create all sorts of custom effects or even enhance functionality of an everyday object or element! I could see the method call to register a new property looking something like this: TweenMax.addProperty(targetObject,"propertyName",callback,DataType); Internally, TweenMax would track and tween the value if it is a Number. Otherwise the user can use TweenMax.set() to apply changes to the object for other data types. Then it would use a callback to send the value to the user. The callback would look something like this: function callback(tween, propertyName, value){ //user stuff } This way, developers could make sure they create properties in an optimal way for you to handle. Obviously, there is onUpdate(), but this opens new possibilities for updates per property.