GSAP for digital signage

[Shaun Gorneau]

So I've been a huge fan of GSAP for a long time. I've recently had the idea to create a complete web-based digital signage platform using Drupal as the CMS behind the scenes ... and GSAP's timeline is perfect for handling this type of sequencing. I have the system built and it runs absolutely perfectly (in terms of how I want it to run).

 

It allows for video, image slideshows, and iframes for "slides" (timeline items). All "slides" fade in for a second, remain "on" for a determined duration, and then fade out for 1 second. For video, the "duration" (in seconds) of the timeline item is set to the duration of the video (in seconds) by simply animating the top to 0 for that duration (the top is already at 0). For iFrames, it set to a value in the CMS. For slideshows, there is no need to set a duration since the stack of <img>s are set to staggerTo modifying the autoAlpha property.

 

Images are loaded as is on the page load, like this

<div class="image-slideshow slide" id="social-dining-febmarch-9-slideshow" style="z-index: 92;">
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B4.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B5.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B6.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B7.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B12.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B13.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B14.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B16.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B17.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-F%26B19.jpg" />
<img src="http://localhost/sites/default/files/slideshows/FebMar2015-MemberNews1.jpg" /></div>

And the timeline setup for this particular slideshow

var SocialDiningFebMarch9SsTl = new TimelineLite();
SocialDiningFebMarch9SsTl.staggerTo( "#social-dining-febmarch-9-slideshow img", 1.5, {autoAlpha:1}, 7 , "SocialDiningFebMarch9Slideshow" )
    .to( '#social-dining-febmarch-9-slideshow' , 7 , {top: 0} ) // adds time to last slide
    .to( '#social-dining-febmarch-9-slideshow' , 1 , {autoAlpha: 0} );

video is loaded on demand as to not overload the browser with video data by outputting something like this

<div class="video slide" id="your-time-ad-10-video-wrapper" data-src="http://localhost/sites/default/files/videos/original/YourTimeFade.mp4" data-bkgd-audio-level="0" data-frgd-audio-level="1" style="z-index: 91;">
</div>

And when the video's timeline is active, I use the onStart callback for the timeline item to dynamically create the video element and its attributes with the attributes on this "placeholder" div element. When the timeline is done, the video element is destroyed.

 

The iframe content follows a similar pattern to video.

 

The first run can be a little rough without a solid broadband connection as it downloads and caches content, but subsequent runs are nice and smooth.

 

My big question is ... and I don't think this is a GSAP problem, but I know there are a lot of smart people on here , this thing runs great loop after loop but then all of a sudden will just freeze. It could be 30 minutes in, or 3 days in. This happen in both Safari and Chrome in OS X and is inconsistent in terms of where/when it decides to crash. I'm keeping a global variable to count how many times the master timeline is played and I refresh the browser after 3 runs. This 1) allows new content to be displayed in the presentation on a regular interval and 2) allows the browser to clear it self out (or so I thought) from a Javascript standpoint.

 

 

This runs on a dedicated Mac Mini (2.5GHz i5 with 8GB ram) hooked up to a transcoder for broadcast at a cable station's headend. I have tested on a local Mac Mini (i5 2.3GHz with 16GB ram), on a local MacBook Air (1.7 i7 with 8GB ram) and in all cases it runs great, until it doesn't.

 

In all cases video is MP4, there is an MP3 audio track playing until it is instructed to stop for video and then resume when that video has finished.

 

I'm just wondering if there is anything I could be doing from a Javascript standpoint to optimize this so that it runs as well it's 100th time as it does its second time.

 

Here is a URL to look at how this is all running (only tested in Safari and Chrome). http://rp38.barulesign.com/presentation/channel-38

 

***The initial load will take some time for the first video (probably) which will cause the slide to terminate what appears to be prematurely. I will be addressing this soon by making the sub timeline pause/play in sync with the status of the video.

 

*** This is setup for HDTV broadcast at 1080p ... sizing your browser window to that aspect ratio will yield the best results in terms of layout.

 

Any thoughts would be greatly appreciated!

[GreenSock]

Nothing sounds terribly wrong based on how you described it, but it's always tough to diagnose stuff like that without really digging in and doing a lot of research/testing. Unfortunately we just don't have the resources to provide custom consulting/troubleshooting like that here in the forums, although maybe someone else is willing to jump in and help. I did a quick timeline recording in Chrome Dev Tools and it looked like garbage collection was happening as expected (at least for the short time I recorded), so that may not be the issue. From what you described, it did sound like a potential memory leak or something. It also could be a browser issue. Have you tried a non-webkit browser? Just curious. 

 

I'd definitely recommend updating to 1.16.1 of GSAP.