Getting started

[eliajf]

I'm using and paying for Greensock because I need the Draggable plug-in. It is worth the money. But I'd like to get more value from the overall package so figured I'd use GSAP everywhere.

 

Can I be honest with all of you? Personally, I find GSAP to be a pain in the ass to use. It is amazingly powerful, which is the root of the problem. I've spend the past couple of days trying to get it to do a simple animation that took five minutes with jQuery animation methods.

 

Given that my goal is not to just complain but contribute back... Can I make a suggestion? Put together a library or two of common, simple animations that I can use off the shelf without having to be an expert. I'd start with the basic jQuery and jQuery UI animations, making GSAP equivalents. Ideally, this would also allow me to look at your code to see how you did routine things, bringing me along so I can do more advanced stuff later.

 

At this point I'm just frustrated and, sadly, using jQuery animations in my project because they actually worked. I really want to get more value from GSAP and hope my comments here aren't taken the wrong way.

[Jonathan]

Hello eliajf, and welcome to the GreenSock Forum!

 

What was the jQuery animations or UI animations you were having an issue converting to GSAP?

 

Also here are some very helpful video tuts by GreenSock:

• QuickTip: Basic play / pause toggle button
• QuickTip: Create staggered animations with TweenMax
• Timeline Tip: Understanding the Position Parameter
• Video: Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite
• Jump Start: GSAP JS

Getting familiar with the API:

• TweenMax
• TweenLite
• TimelineMax
• TimelineLite
• Plugins

Once you learn the basics of Sequencing your tweens and timelines, GSAP becomes a very powerful and customizable tool to create animations.  And like any other API, jQuery included, .. going through the API Docs can help a lot in understanding what is available in GSAP.

 

You can find alot of useful and educational code examples on GreenSock's and some Moderators codepen pages.

 

http://codepen.io/GreenSock/

 

http://codepen.io/jonathan/

http://codepen.io/jamiejefferson

http://codepen.io/rhernando

http://codepen.io/MAW/

 

I suggest that you start playing with GreenSocks, and other community members codepen demos. This is the best way to learn and see changes in real time, to better help you understand and learn GSAP.

 

But that is just my 2 cents, and I appreciate your question and post

[GreenSock]

How DARE you insult our product!

 

Totally kidding. No worries at all. In fact, we love getting practical feedback like this. I'm running out the door at the moment, but we'll reply later with some thoughts. We definitely want to make sure GSAP is easy for you to use. I can honestly say that I think this is the first I've heard someone say they think GSAP is really hard to use (usually it's the opposite), but I'm sure there are some great ways you can help us make things better. I bet some others have felt the same way you do but didn't bother to say anything. I'll likely have some questions for you later. Stand by...

[Carl]

Hi Eliajf,

 

Thanks for the thoughtful suggestions.

Of course I'm sorry to hear that you hit some obstacles with GSAP. We've found that GSAP isn't for everyone, but those that stick with it are extremely satisfied (and this is based on real feedback we get almost daily). 

 

That isn't to say there isn't a learning curve and that we have all our bases covered for beginners. 

 

Jonathan did a great job of providing you the key learning resources, so I won't repeat all the links.

 

But just to give you an idea of where are heads are, we've been trying to suit as many learning styles as possible

• We created our Jump Start interactive guide so people could just click through some working code and see the basics.
• We also put the code from all the Jump Start demos on CodePen for people who like to tinker, break and rebuild things to learn: http://codepen.io/collection/ifybJ/
• We have very detailed documentation for those who want the technical details
• We have a VERY long written Getting Started guide for those who just want to snuggle up with a cup of coffee and absorb everything at once

 

However, even with all this, we have known we were missing a big component – a simple, no-nonsense video that quickly SHOWS people how things work.

Not sure when you started with GSAP, but the video here only came out last week: http://greensock.com/get-started-jsWe're really hoping it fills in the gaps and helps people get over the initial hurdles. 

 

I'm interested in knowing if you've seen it and what your impressions are.

 

Your idea of a simple effects pack is good, and something we've heard from some others, it might be something we need to offer.

 

I have a feeling that you may just be very comfy with jQuery and GSAP is admittedly a totally different beast. Probably just have to adjust the way you approach things. I know I am completely biased in this regard. Just today I came across this pretty cool animation : http://codepen.io/jasonhibbs/pen/wBpzzg(click the hammer). When I looked at the code it was completely foreign to me. The idea of switching a class on an element (and removing it) using a setTimeout, to me, is pure madness. I'm sure the author thought it was pretty darn logical though. 

 

Again, we're totally open to ways we can do this better and serve folks who are just getting started. I'm confident that if you give it a little more time, and perhaps start with some really simple things, we can get you into the "extremely satisfied" camp. And hopefully, you've seen by now that the staff and community is willing to help along the way. 

 

Looking forward to hearing more from you.

 

Best,

 

Carl

[GreenSock]

I couldn't say it much better than Carl and Jonathan. I'm curious, though: could you provide a few more details about what the ideal API would look like for you? What would your code look like? Is your goal to make it just like jQuery because that's familiar? Any details you could provide would be awesome. Sample quasi code is ideal. 

 

Also, what specifically did you fumble with in GSAP? What was cumbersome? What did you find yourself wanting, like "Ugh, I wish I could just ____"? 

 

There are a lot of canned solutions out there that are nice for folks who want to sprinkle in pre-configured effects ("make my button wiggle", "pulse on rollover", or whatever), but GSAP was designed for top-tier animators who need ultimate power and flexibility rather than canned effects (not that those are bad, of course). It's a different mentality. GSAP lovers tend to turn their nose up at the canned solutions and they want to make it exactly the way they see it in their mind's eye. They want to be able to tweak every little parameter, control it all during runtime, do crazy dynamic stuff, etc. When designing a system like that, the API surface area may look a bit intimidating at first and it may require a little extra elbow grease to get the canned effects. But ultimately you feel like you've got superpowers because you're not limited to just certain canned effects (which, again, aren't "bad" at all). 

 

All that being said, I'm confident there are ways we could write some functions that'd make it very easy to create certain common effects. Those wouldn't even need to be an official part of the tools (eating up kb), but perhaps sit in some codepen demos that people could pull from and analyze. Does that sound like the kind of thing you're looking for? 

[eliajf]

I've been thinking about this and think I know the disconnect, even if I am having a hard time explaining it. It isn't about me being a beginner with GSAP (I am but have also been using it for a few months) really and it isn't about me just being more familiar with jQuery. I've been through much of this documentation previously (although the video is new. I will check that out and had it in my inbox to watch when I get a little time.)

 

Here's the difference, I think: GSAP is animating objects while jQuery is animating the DOM itself. Maybe that makes no sense or is simplistic. I used GSAP to drag a nice little list picker/date picker widget. It was indispensable for that. It has a nice bounce effect when dragged and has really nice acceleration/deceleration properties. I want to do more with it but I was able to get it working quite quickly.

 

Where I've struggled is animating the DOM itself, which is most of what I'm doing. This is showing a hidden section or displaying a keypad in a nice animated way. Mostly this is the kind of work I'm doing as the product is a productivity app. I'm finding this to be much harder than I'd think it should be.

 

So I'm not suggesting a change in API at all, or a simplified API. I'm suggesting pre-built but common animations. Thinking out loud, maybe those are in a library or in a bunch of codepens that are linked into the site in some obvious way. The type of things I'm thinking happen to align closely with the basics created by jQuery: slideUp, slideDown, animate css property, etc.

 

I really don't want to use jQuery for these types of animations. I do want to use GSAP and I want to use GSAP for all animations. The examples I've seen, though, are pretty fancy animations of objects in the DOM. That's not what I need. I hope I've done a half-decent job of explaining.

 

---

 

Here's my show/hide code for a collapsibleSection, written with jQuery. It finds all the rows marked collapsible congruent to each other starting with element $el, which happens to be a header row (.collapsible-header). It wraps all that in a div, collapses the entire thing and when done, marks those rows as hidden and unwraps itself. For various reasons the code must be unwrapped once collapsed or expanded. Showing reverses the process.

 

I never could get this to work with GSAP, although I suspect if I could keep it wrapped then I could have just reversed the animation. Again, I can't do that though.

	collapsibleSection: function($el, animated) {
		var $collapsibleSet = $el.nextUntil(":not(.collapsible)");

		if (animated) {
			$collapsibleSet.wrapAll("<div></div>");
			var $cw = $collapsibleSet.parent();
			if ($el.hasClass("is-collapsed")) {
				$cw.hide();
				$collapsibleSet.removeClass("is-hidden");
				$el.removeClass("is-collapsed");
				$cw.slideDown(constant.ANIMATION_STANDARD_TIMER_MS, function() {
					cleanse.unwrap($cw, false);
					TweenLite.to(window, constant.ANIMATION_STANDARD_TIMER, {scrollTo:{y:$el.position().top}, ease:Power2.easeOut});
				});
			} else {
				$el.addClass("is-collapsed");
				$cw.slideUp(constant.ANIMATION_STANDARD_TIMER_MS, function() {
					$collapsibleSet.addClass("is-hidden");
					cleanse.unwrap($cw, false);
				});
			}
		} else {
			if ($el.hasClass("is-collapsed")) {
				$collapsibleSet.removeClass("is-hidden");
				$el.removeClass("is-collapsed");
			} else {
				$collapsibleSet.addClass("is-hidden");
				$el.addClass("is-collapsed");
			}
		}
	},

[Diaco]

Hi eliajf 

 

pls make a reduced Codepen Demo available :

 

Read This First: How to Create a CodePen Demo

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

TweenMax.set(elem,{autoAlpha:0}) // == elem.hide();
TweenMax.set(elem,{autoAlpha:1}) // == elem.show();
TweenMax.to(elem,0.5,{autoAlpha:0}) // == elem.fadeOut();
TweenMax.to(elem,0.5,{autoAlpha:1}) // == elem.fadeIn();

TweenMax.set(elem,{className:"+=blue"}) // == elem.addClass("blue");
TweenMax.to(elem,2,{className:"+=blue"}) // == elem.addClass("blue"); with tween
TweenMax.set(elem,{className:"-=blue"}) // == elem.removeClass("blue");
TweenMax.to(elem,2,{className:"-=blue"})  // == elem.removeClass("blue"); with tween
TweenMax.set(elem,{className:"blue"}) // == set whole of elem classname

See the Pen xbOWPz by MAW (@MAW) on CodePen

TweenMax.to(elem,0.5,{height:0}) // == elem.slideUp();

TweenMax.set(elem,{height:"auto"}) // == elem.slideDown();
TweenMax.from(elem,0.5,{height:0}) //

See the Pen Bzhji by GreenSock (@GreenSock) on CodePen

[OSUblake]

Given that my goal is not to just complain but contribute back... Can I make a suggestion? Put together a library or two of common, simple animations that I can use off the shelf without having to be an expert. I'd start with the basic jQuery and jQuery UI animations, making GSAP equivalents. Ideally, this would also allow me to look at your code to see how you did routine things, bringing me along so I can do more advanced stuff later.

 

I understand what Eliajf means. Most people learn by example, and this would extremely helpful. And it doesn't have to be production ready. In fact, most of this already exists through various CodePens that have been posted here.

 

The problem is that there is no quick way to find what you are looking for. Searching on sites like CodePen is slow and clunky, and searching this forum requires sifting through long posts before finding a working example. It would be nice if there was an archive of demos for people to look through. Anytime a demo of value is posted here, or anywhere else for that matter, you could have a moderator tag it with keywords, a description, and relevant links, and then post it to some archive on this site. And the archive needs to be quick and filterable. Not like CodePen where they only show 6 items at a time.

 

Just my two cents.

[GreenSock]

That's a solid idea, OSUblake. You have been officially promoted to moderator and have our blessing to curate such a collection/archive.

 

We could also consider creating a codepen collection called "Animation effects". Codepen isn't the easiest to search, though, and it limits you to 5 tags I believe. Too bad. I'll talk to the codepen guys about that.

 

Also keep in mind that our Examples section of the web site can be configured to show just "examples" which are basically codepens (whereas showcases are like live web sites). 

 

We'll definitely keep this suggestion in mind as we move forward. 

[eliajf]

This would be perfect. In fact, the Tweens that Diaco posted are a fantastic start on some of what I was thinking. Part of the problem as a newbie is just knowing it is possible. Once I know it is possible it is harder to give up on GSAP.

[eliajf]

The video is awesome! I hope that's on the home page. At least that gives me a sense of what is possible. Now if there was also a page with links to a series of simple CodePens that demonstrated these and a few others, as OSUBlake suggested, that would be a capper and I don't think I'd feel so lost.

 

Thanks for hearing me out everyone.