Jump to content
Search Community

Examples onclick

divinitycomputing test
Moderator Tag

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

I've been interested in GSAP for some time, I'd like to help GSAP grow. But i think there is a lack of quick tutorials or code. 

 

I've seen some people do some amazing things with GSAP but beyond documentation, there are few resources. 

 

Most of the time when web developers start new projects they just take code that works and add it to their projects adjust it a little to suit their needs. They don't want to learn how a new library works right this second even if it does look good.

 

An example of what i mean is http://www.shanemielke.com/archives/usopen-sessions/ 

 

These are some really amazing animations but for people just starting out they can learn little from it as it is so complex, i see this sort of thing alot in the codepens that are around and in showcases. 

 

Whilst there are some tutorials and some code to get started, i think as a community we could do more. 

 

In an effort to help i created this http://www.divinitycomputing.com/gsap-javascript-buttons/

 

Whilst yes i just created this account, i have been using GSAP in projects for about 6 months, i've just made my new company ( i'm 19) and i'd like to put myself on the map, with GSAP i aim to do that, i consider myself a pretty decent programmer , so if you have any  ideas or requests for what i might do next with GSAP, ask and ill see what i can put together, anyway thanks.

 

Happy coding.

 

 

 

  • Like 1
Link to comment
Share on other sites

I know what you mean. Here's a thread where I bring up some of the same points as you. I'd like to come up with some way to aggregate all the good examples listed in the forum.

 

Something I think would be really helpful would be to have a tutorial section like Knockout.js has on their site. You go step-by-step building an example, and if you get stuck, it corrects your code.

 

http://learn.knockoutjs.com/#/?tutorial=intro

Link to comment
Share on other sites

I think GSAP is fairly intuitive once you know where everything goes. But the forum is under support, wouldn't it be better if it was more community centered it would get more people involved.

 

I think a tutorial section would be nice like that.

But we are GSAP people, maybe we could make one that looks better than that knockout.js haha

 

 

I know what you mean. Here's a thread where I bring up some of the same points as you. I'd like to come up with some way to aggregate all the good examples listed in the forum.

 

Something I think would be really helpful would be to have a tutorial section like Knockout.js has on their site. You go step-by-step building an example, and if you get stuck, it corrects your code.

 

http://learn.knockoutjs.com/#/?tutorial=intro

Link to comment
Share on other sites

I thought GSAP was ridiculously easy to pick up, and I never used an animation library before... unless jQuery/UI counts. After spending one day messing around on CodePen after watching that Burger Boy video, I swore off of from ever using CSS to do anything interactive.

 

I think the biggest problem people have is that jQuery has spoiled them, and they don't know how to do anything without a $ sign attached to every line of code, so a JavaScript primer would also be nice.

 

So how do you get more people involved in a community effort? You need some sort central hub to link everything together, and I'm not sure if they have any immediate plans to add more functionality to this site. Just curious, do you know of any good community examples/models out there? Most of the groups I used to be a part of have slowly disappeared thanks to social media.

  • Like 1
Link to comment
Share on other sites

The best sort of model i can think of is unity, they have a whole game engine, community and everything with it , they have tonnes of assets UE4 similar thing but alot smaller. But these are games engines i dont know if you could do the same for a GSAP.

 

Jquery is great for alot of things but it was never built for animation. Initially it took me a second to understand how GSAP worked but this was due to finding it hard to get the right resources and looking at all this cool animation other people have done. 

 

honestly the best solution i could think of is a website or subdomain based on sharing GSAP animations... similar thing to codepen maybe even integrate code pen in properly, then give them each their own post like a forum and a rating system , obviously that is just a quick idea but something along these sort of lines could work.

  • Like 1
Link to comment
Share on other sites

Oh yeah, I totally forgot about game dev communities!

 

I like the idea, especially with the rise of new libraries like Angular, React, and Polymer, where it's real easy to share and create custom controls. I'd love to see what other people are working on.

Link to comment
Share on other sites

Guys , could you pls Define Developers !? you meant who copy/paste others code and use others plugins every where !?... or code Writers

 

yep , jquery has messed up most of guys not for $ sign , jQuery UI + plugins is cause of that . we used to use others code/plugins without any grasp of the process .

 

already we have Learning Center , GSAP blog , bunch of great and simple Codepen demos here and really active forums , they can start here and after that all depends on developers creativity .

 

by the way i think this's Carl's Responsibility to planned this type of actions as the GSAP official , who have Years of experience as an educator + extensive knowledge + .............etc , more than  anybody else .

Link to comment
Share on other sites

Well I guess developers would be both those who copypasta and code writers. You have to start off somewhere, and copying can help you get started if you are actually trying to learn. That's kind of how I got started programming, but I wasn't copying to take credit for it and pass it off as my own. I would take an example and comment out almost every line of code, and then rebuild it one line at time until I could figure out what was going on.

 

So yes, a lot depends on the developers creativity, but that can only take you so far if you don't know how to apply it.

  • Like 1
Link to comment
Share on other sites

i dont know if you have ever had a boss that was like mine. You have 2 days to finish a project that really you need 4, so you build templates take others code to get it built quicker if you did everything from scratch you'd get fired and from what i know most developers have similar issues at least some days.

when you have such tight deadlines as most developers do, you go to the resources you trust the ones you go to that you know  will give you the answers you seek, like this http://www.ascii.cl/htmlcodes.htm I know what it is and what i will get. Codepens dont give you that security they are random and sometimes excellent, but its hard to find the one you want because of the differences between them, usually the code is also to complicated to just slide into your own projects. (these are my opinions granted but i know others feel the same)

 

Now that knocks out codepens, what about other gsap resources? 

 

when you search for gsap you will get this http://greensock.com/get-started-js, its a good start yet ... no one reads something that long im sorry but its uninteresting , to much text if you are willing, you get to something i use often (that easing box) but thats only if you scroll down a fair distance. Saying that the docs are quite strong. Some people use docs if they must but they prefer alternatives - more interesting things. now the learning center has a few things and i hope it grows but its hidden away hard to find, even then it doesnt consider how people learn to well.

 

Using this as an example

var tl = new TimelineLite();
tl.to("#green", 1, {x:750})
.to("#blue", 1, {x:750})
.to("#orange", 1, {x:750});

 

I found this on one of the pages. right well, code is solid but most programmers like to change code to what they need... especially when in a hurry, this code ... it wouldn't be useful in a project... it's unlikely people will move 3 objects like this one after another, yes you can adjust it but then you might as well be starting from scratch, code like this should be something someone might actually use. 

 

what people need and want is something like this http://daneden.github.io/animate.css/ it's simple you get the code you understand and you get elements you need. Then you add it to you application or website.

 

Modern developers they use the resources they have and gsap has quite a few but they are mismatched they all have good elements but are all flawed somehow, really if you combined them all you would have something truly useful.

 

im not suggesting we do this purely by ourselves i would like some of the gsap team to get involved, They have something special here and more people need to starting using it,  

 

 

Guys , could you pls Define Developers !? you meant who copy/paste others code and use others plugins every where !?... or code Writers

 

yep , jquery has messed up most of guys not for $ sign , jQuery UI + plugins is cause of that . we used to use others code/plugins without any grasp of the process .

 

already we have Learning Center , GSAP blog , bunch of great and simple Codepen demos here and really active forums , they can start here and after that all depends on developers creativity .

 

by the way i think this's Carl's Responsibility to planned this type of actions as the GSAP official , who have Years of experience as an educator + extensive knowledge + .............etc , more than  anybody else .

  • Like 2
Link to comment
Share on other sites

same as you , i've years of experience in working as employee / freelancer . i know what you mean , but i never accept a job position or project when i know that i have lack in my knowladge or whatever and personally i made my works material in my free times as hobby for future projects , i think this's correct way .

 

pls search in Codepens , awwwards.com .... you will see really amazing works with GSAP , made by Real Developers , not others code collector , who worth to having unique works and job positions , all of them made by using this simple GSAP Tween/Timeline but with creativity and vision ( same as Shane Mielke works that you've mentioned )

 

seems all folks around here are happy with GSAP except a few ( less than 3 , at least that's what i know );

 

anyway , that's just my opinion :)

  • Like 1
Link to comment
Share on other sites

Hi DivinityComputing,

 

Welcome to the GreenSock forums. 

Thanks for sharing you interest in contributing more to the GreenSock community and looking for ways to increase the learning experience. Great stuff.

 

Also, thanks for making the tutorial with the button effects. Very cool. 

 

To address your concern about it being difficult to find 3rd-party learning resoures, unfortunately there haven't been a ton of high-quality, community-generated GSAP tutorials, we're definitely seeing an uptick and are eager to integrate them into our Learning section as they arrive. For instance, we just put Chris Gannon's SVG Jump Loader tutorial in there. 

 

One of our community members has been doing a good job of blogging about GSAP and has some really sweet tips: http://bassta.bg/

 

To address your concern that our resources are flawed and that we don't understand how people learn, we really do our best to address all styles of learning through the following:

  1. detailed documentation: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/
  2. quick visual tour or the API: http://greensock.com/jump-start-js
  3. very long and detailed getting started guide: http://greensock.com/get-started-js
  4. please note we added a video the guide above because we agree that it was too long for some. Be sure to watch it.
  5. simple demos you can edit and experiment with: http://codepen.io/collection/ifybJ/(17)
  6. more advanced demos built by the community that you can study and get inspired by: http://codepen.io/collection/pBmwL/(over 100)

The code you took issue with

var tl = new TimelineLite();
tl.to("#green", 1, {x:750})
.to("#blue", 1, {x:750})
.to("#orange", 1, {x:750});

was from our article on understanding the position parameter. It was made to be as clear and simple as possible so that people could progress through the multiple uses of that parameter and very easily understand / visualize how it works... not a quick fix to build a jaw-dropping effect with GSAP without spending the time to learn it. Our focus is often on teaching people the basic mechanics of how the engine works. We give them the core building blocks so that they can then move on to doing all the award-winning stuff. 

 

Hopefully this helps you better understand what we are trying to accomplish with the resources we create. 

 

There is certainly room for more tutorials from the community and I encourage you to keep creating them.

I really like your first one and there are definitely folks who will be interested in being able to see how each of your effects was created.

Yes, we need more stuff like that. I'll be recommending it to folks for sure.

 

We're big fans of short, focused and easy-to-digest content. Would LOVE to see more developers like yourself jumping in and providing cool demos with simple descriptions... similar to our Quick TIps like: http://greensock.com/playpause 

We'll do everything we can to encourage and promote those types of efforts. 

 

I love Blake's suggestion of having tools like what knockout is using, but to be completely honest, it is highly unlikely that we are going to be building anything like that any time soon. We are just hyper focused on the GSAP API and don't have time / resources for building apps like that. 

 

 

Please keep an eye on these forums. They are probably the greatest learning resource we offer by far (due largely to the vast knowledge of our friendly and helpful moderators) and I  think you will fit in here really well. I think you'll find that by participating in the discussions you'll see some areas where tutorials are needed and be inspired to create things that will help many people.

 

Hope to see you around and see more of your work.

 

Best,

Carl

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

I hear the concerns in this thread. Ive always said that those one can produce examples of cool tricks, and those we have those greensock classes.. there isnt a developer who shares techniques how he would go from something simple to complex. Kudos to those who can do without... this is not the creators fault btw...

 

It would be helpful for a developer who creates these pieces of work to walk through his code in stages..

like the person who animated Howl's Moving Castle, if he can create it again step by step.. 

that was a lot of work...and Shane's Us open site. there are a lot of concepts in that one....

 

ive learned how to break it down myself but it would be helpful for the original developer to do that.

but to carls point when I get there id love to do a walk through of my own

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...