Slide Presentation with animations

[lance1572]

Hi all!

 

I come from using TweenMax for AS and have now been tasked with creating a slide presentation with audio without using Flash so it can be viewed on ipads etc.

 

Here are my tasks. I have a narrator discussing different slides much like a powerpoint presentation. Each slide could potentially have its own bulleted animations synced with the audio. Each slide progress automatically. The user can scrub forward or backwards and there is a time-code.

 

I have built one already using timesheets.js but it only allows for slide to slide animations not animations within a particular slide or at least thats what I'm getting.

 

i guess its a two-fold question.

 

Can GSAP be integrated with timesheets

 

Or can I build something like I mentioned above with GSAP alone?

 

Many thanks!

 

Lance

 

 

 

 

[Rodrigo]

Hi lance,

 

I think you'll be better off working with GSAP alone. I can't assume that you could have conflicts with timesheets.js, but since you can build the entire stuff in GreenSock I don't see the need of adding another library.

 

John Polacek made a very slick presentation last year, I can't find the actual slides, but there's a repository in John's Github page with that and a jQuery plugin He created for it. It includes the example mentioned above:

 

https://github.com/johnpolacek/open-source-for-fame-and-fortune

 

That is a very sweet example of a slide presentation.

 

Another solid example is the Jump Started guide made by Carl:

 

http://www.greensock.com/jump-start-js/

 

As you can see you can controll all the events associated with your presentation, including audio, with the great set of event callbacks the engine has and in a slide presentation the use of labels is something you can also take full advantage of.

 

Rodrigo.

[lance1572]

Whoa! thanks Rodrigo!!! I'll give it a look!!!! Very much appreciated!  I was messing with Toolkitjs for Flash but that seems buggy to me.

[lance1572]

oh yeh!!!! I'm going for it

[GreenSock]

Yeah, I'd probably steer clear of timesheets because:

1. It seems pretty limited. Like you have to either sequence OR have things run in parallel, but what if you want to have animations overlap or have precise control of the timing? What if you want to animate the timeScale or stagger start times, etc. - these are things that are trivial with GSAP but from my limited understanding of timesheets.js, that'd be impossible.
2. It seems to not have been updated for around 3 years (stagnant)
3. GSAP can do everything you're talking about, so there's no need for timesheets.js. 

Disclaimer: I had never even heard of timesheets.js before today when I read your post, so I am certainly no expert on it. Maybe it can do everything you need, but I kinda doubt it. I can say confidently, though, that GSAP can.

 

Here's a CodePen that shows the animation I built for the home page: http://codepen.io/GreenSock/pen/b9133e0af7101adb4d7517f10b34c3ed It's probably more advanced than you're looking for, but my point is that you should be able to accomplish whatever you need with GSAP. 

 

Happy tweening!

[Carl]

Yeah, as soon as I read this thread, John Polacek's slides came to mind, but again Rodrigo beat me to it.

 

Here is the direct link to a demo incase you haven't downloaded from github yet:

http://johnpolacek.github.io/open-source-for-fame-and-fortune/

 

It does what it is supposed to do VERY well, and that is allow you to click through many custom slide transitions in a linear fashion. Not only can you click (or scroll) from slide to slide... but you can click through incremental builds of each slide... like each bullet point coming in individually. Furthermore, once you understand how its built, you pretty much just build a bunch of timelines using pure GSAP code and his plugin hooks in all the interactivity / navigation behind the scenes. 

 

It is a great demo illustrating the variety of animation tasks GSAP handles with ease.

 

Just one word of caution, the way his slide show is currently built would make it difficult to add any non-linear navigation. Currently most of his slide-out animations overlap with slide-in animations... So if you are on Slide 4 and you build a nav to jump to Slide 8, when Slide 8 comes in you would see Slide 7 animate out (which would appear awkward).

 

Again, this is just a limitation of how his particular slideshow is currently set up. There are probably dozens of ways to architect something like this and GSAP would give you complete freedom to animate anything at anytime any way you want.

[lance1572]

Thank you for the response gentlemen! I'm definitely rusty on this since I really havent touched TweenMax AS for sometime (been doing more CSS - Sass responsive dev etc...). So I am ready to jump back in. It seems that I have been missing out on a lot!! Technology goes so fast!!!

 

I remember building out interactive banners and small applications with TweenMax AS and LOVED every minute of it. I know that JS is 'somewhat similar' so it shouldn't be too tough to pick it up. I have a pretty good understanding of JQuery so far.

 

My only hesitation was the audio part. After searching here, I had only found maybe one or two posts on audio and those were saying that audio was limited.

 

 

As far as timesheets go... I had to grab something an go . The deadline put on me for that was unbelievable.

 

I'd prefer to ditch that in favor of this!!

 

 

Many thanks!!!

 

Sad I cannot go to NYC for the training!

 

best,

Lance