Tutorials?

[azuki]

Hey Greensock team,

 

I'm sure this isn't a new request but I check back here every so often to see if any new tutorials have been posted.  Carl, I don't mean to call you out but I learned quite a bit from your early Flash tutorials and since your migration to greensock, I've been awaiting the same great learning content from snorkl.tv to appear here for GSAP.

 

The slideshow is a great start for us beginners but are there any plans for any new video tutorials?

 

Thanks in advance.  Always appreciate the contribution you guys make to web dev!

 

- azuki

[Michael71]

It would be a good idea I think to gather most of the examples that are in the "wild" using greensock technologies. That is cumbersome too ofcourse but at least it saves some time from writing down tons of examples and tutorials.

[GreenSock]

Yes indeed - we've got lots of plans for cranking out content but it takes time (more than you might think). Carl happens to be on a brief vacation right this second, but he's hard at work on training tools. The Jump Start was a big step, getting something that walks people through getting familiar with the basics in an interactive way. But some videos would certainly be helpful too. Give us some time. Thanks for the vote of confidence and polite request for more content. It's nice to know that it's valued out there - feedback from the community helps us understand where to focus our energies.

 

We also plan to put codepen to good use, cranking out some examples there that are easy to dissect and play around with. 

 

If you have requests for certain topics or examples, please don't hesitate to chime in here and let us know. 

[azuki]

Thanks, Jack. I know you guys would only take time to put out something of quality.

 

As a sidenote, I've always appreciated the DIY nature of greensock and the community. That is, the reward really does go to those that are willing to find examples, deconstruct them, experiment, and interact with the forums.

 

While I do hope this platform continues to grow, I'd be thrown into a pathetic pit of depression if a video series for GSAP showed up on Lynda.com...

[GreenSock]

Ha ha. Well, I think it'd be great to have a Lynda.com series at some point. Our goal isn't to be a DIY thing - one of the strengths of the platform (in my opinion) is how easy it is to work with, but I also realize that it's very deep at the same time which means there's a steeper learning curve for the non-basic stuff. We hope to smooth that out by cranking out solid tutorials, videos, and interactive tools like the Jump Start. 

 

And of course we encourage anyone in the community to share examples too and post things on the web that others can learn from. The more we help each other out and create learning resources, the better the experience will be for everyone. 

[Michael71]

Since I didn't want to make a separate post about this, I tried to create a port from the AS3 "SplitText" function in Javascript. 
 
The post and tutorial can be found here:
http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/
 
Also planning of generalizing it and releasing as a JQuery plugin.
 
I hope you like it!

[Carl]

Hey Michael,

 

That's really great. Thanks so much for contributing to the community. Lots of good stuff in the tutorial.  It is really cool that you created that codepen too! I think this will really help folks, I'm quite certain I'll find a way to make use of it. 

 

I look forward to seeing how far you take it with the jQuery plugin.

 

Carl

[Michael71]

I have finally setup a jquery plugin for the SplitText, and a github project.

 

You can view the github here: http://netgfx.github.com/SplitText/

 

I have also included some more animations and options, as well as a series of examples.

 

It still needs some refinement but I think it is a good place for someone to start

[Carl]

Thanks for the update Michael. Been very busy today so I haven't dug to deep, but I really enjoyed the demos. 

[Rodrigo]

Hi,

 

Since this post came up, I started working in a tutorial about integrating GSAP JS with wordpress, but because of work and problems with the server where my blog was in I couldn't publish it before, therefore I don't know how useful can be right now, but I'm hoping that in the future it could help someone.

 

It deals with the basic of using GSAP JS in wordpress and how can you use it on specific posts and pages:

http://codeaway.info/incorporating-greensock-ap-js-into-wordpress/

 

Cheers,

Rodrigo.

[Ihatetomatoes]

Hi there,

I have made a tutorial which might be handy to some of you.

 

 

Tutorial: Create Apple elastic navigation using Greensock

http://ihatetomatoes.net/tutorial-apple-navigation-using-greensock/

 

Let me know what you think. And stay tuned for more.

 

Cheers

P.

[Chrysto]

Great tuts, Ihatetomatoes and Michael!

 

I'm currently writing a series of tutorials - getting started with GSAP ( and some jQuery / JS basics, seems a lot of AS3 developers have difficulties with some aspects of JavaScript ). Currently I've written the basics ot JS -> html nodes how to select them, basic GSAP syntax, more GSAP goodies and then I'm planning to extend the series with plugins and TimelineMax. I plan to release the series at once, once they're completed. It would be great to hear from you guys, what was the most difficult thing when you were starting with GSAP? What was the "a-haaa" moment? 

[Rodrigo]

Hi Chrysto,

 

I've checked your tuts keep up the good work!!

 

As for the most difficult GSAP stuff, for me was working with the overwrite manager but not the manager itself, the problem was understanding the modifications of the starting and ending values of the tweens involved in the overwriting and how to create a seamless tween/timeline that could work with overwrite more than once. Also the update and invalidate methods gave me a couple of headaches, but the updated was the worst because I was in diapers in terms of GSAP.

 

Cheers,

Rodrigo.

[Chrysto]

Thanks, Rodrigo. Definitely will consider making a separate tutorial about overwriting manager. Writing tutorials prove to be very difficult, especially when you don't know the reader previous experience with JavaScript - for example I consider DOM ready event and jQuery selectors something every front end dev should know, but many times I proved wrong. So the best way I think, is to begin with some CSS / JS introduction followed by jQuery introduction followed by GSAP introduction (tweenlite syntax - selector, time, vars )  and then geting deeper into GSAP ( delays, from, fromTo, set methods and easing ) . Then introducing the Plugins, more advanced concepts ,timeline and then some special tricks for the end. This was my learning curve and I feel the flow natural Other thing I'm thinking about is codepen example for every TweenMax/TimelineMax method and all the plugin - pretty much like GSAP AS version Plugin Explorer - it really helped me when I was starting. 

 

Jack did a great job with http://www.greensock.com/get-started-js/#basics page , and expanding it with some basic JS knowledge ( out of the scope of GSAP page ) and creating a pen for every feature may come in handy for just-starting developers. 

 

It would be also great to collect and categorize all tutorials about GSAP. 

[Ihatetomatoes]

Nice work Christo, I have added another tutorial to the collection.

 

http://goo.gl/mG2HP

 

In terms of "a-haaa" moment, I didn't want initially try to learn new animation library, but seeing few tutorials and videos made me realise that the syntax is very simple and the results are looking great and consistent across the browsers.

[Carl]

Hey Petr, 

 

Enjoyed the tutorial. Another nice effect. Looking forward to part 2.

 

Carl