Jump to content
Search Community

Don't use reserved properties!

swampthang test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

:)

 

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.

  • Like 3
Link to comment
Share on other sites

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

 

In this

See the Pen ?editors=0010 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.   :huh:

 

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...