Jump to content
Search Community

How To: Modular Shareble Conditional Animations

Dipscom 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

Soooooo,

 

I have been meaning to start writing down my workflow in order to fine tune my workflow and put together a portfolio.

 

The portfolio thing is just not happening at the moment. Too much work even without a portfolio. So, I am planning to start collecting my ideas and workflows in CodePen and eventually turn that into my portfolio.

 

I have now written a little article on something I stumbled upon a couple of months ago and have been itching to share with people to see who else knows about it and uses Objects as targets for Tweens.

 

Also, I have never been a writer and this is pretty much the first time I ever write something that is going public so, hints and suggestions are welcome.

 

Enjoy!

 

http://codepen.io/dipscom/post/conditional-animations-with-greensock-and-objects

 

  • Like 2
Link to comment
Share on other sites

This is great, Dipscom. I hope more people follow your lead and share their tips and techniques. I find that a lot of people in the banner industry are super protective of their process. They see it as a competitive advantage. But when you share like this, I think it helps a lot of people and establishes your competence. 

 

Congrats on your first article!

Link to comment
Share on other sites

I hope the same.

 

"I have a dream... That one day we will all share code. We will all share workflows and we will no longer spend a day just trawling through someone's code trying to make sense of whatever madness has possessed that previous developer".

Link to comment
Share on other sites

Good job! I don't see too many people using objects for animations. Just look at most of the stuff on CodePen for proof. Not sure why, but my theory is that jQuery and CSS has locked people into a certain way of thinking about them, and I think SVG animations are going down that same path. I started off learning JavaScript with the canvas, which I think was really helpful because I had to learn how to build everything from scratch. There is no scene graph, elements, or event system to work with, just a bunch of pixels that you have to figure out how to manage. 

 

You should start collecting all your different approaches and try to create a little library. It doesn't have to be perfect, but it will definitely payoff later because you'll most likely come across the same problem again.

Link to comment
Share on other sites

I really struggled with JavaScript when I was first learning the DOM. At the time I was making a card game and was told not to extend or add methods to elements. Ok, then how do I make a card? I could make a div look like a card with CSS, but it's was still a div. I wanted to work with a card so I could do stuff like get its value, or tell it to do something like return to the pile or change into a different type of card. At the time I didn't know you could wrap an element in an object, so I had to resort to using abunch of jQuery methods to do the simpliest of things. Hundreds of lines of unnecessary code that could have eliminated if I used objects.
 
So here's your GSAP trick of the day. If you wrap an element with an object and make it appear array-like, GSAP will automatically use the element in a tween just like it does with a jQuery object. Nothing special. Just a nice little shortcut if you're only going to be animating properties of the element.

// Simple object with array-like properties, index and length: [0]: myElement, length: 1
var myObj = {  
  [0]: myElement,
  length: 1,
  element: myElement,
  // other properties…
};

// This will animate the element in your object
TweenLite.to(myObj, 1, {x: 100 });

// Normally you would have to do it like this
TweenLite.to(myObj.element, 1, {x: 100});

Let's make a wrapped element do something. Here's a demo I just made of some cards that you can throw around using a card class. It shouldn't be too hard to follow. I have some internal methods to animate the card, but I can also animate it externally using the animateCards function. If only the old me could have seen this.

 

See the Pen Lpdbdv?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Another really easy way to work with objects is by using closures. A lot of people already use closures without even realizing it. Everytime you call a function to return a timeline you are using a closure. Creating a click event is an even simplier example of a closure. Here's a couple of examples where I helped somebody out with their animations by using closures.
 
Coin Flip
Post: http://greensock.com/forums/topic/12161-why-wont-the-last-coin-flip/?p=50016
Demo:

See the Pen XbOpeP?editors=001 by osublake (@osublake) on CodePen


 
Page slider
Post: http://greensock.com/forums/topic/12116-how-to-manage-multiple-timelines/?p=49916
Demo:

See the Pen 2f5b1274280a9c147173f7fc498238de?editors=001 by osublake (@osublake) on CodePen


 
Floating orbs
Post: http://greensock.com/forums/topic/12419-nested-timelines-eventually-sync/
Demo:

See the Pen 6475b55df56dbc258de62f1f1f6793ca?editors=001 by osublake (@osublake) on CodePen


 
Hope that helps you out!

  • Like 2
Link to comment
Share on other sites

You were on a roll OSUblake. Thanks for the encouragement. 

 

I do have a little library already. I have even a task runner set up with GulpJS. It does wonders for me. It is not bullet proof yet and so, I don't go around showing people. I haven't even found the time to work on it in the past month or two. That just makes me wonder how little the likes of you, Jonathan, Diaco, Carl and Jake sleep... 

 

Really interesting trick that you showed, will have to digest it a bit better to see if I can make it work with this workflow I describe in the article above.

 

I say the reason I ended up using objects is because of my ignorance of what cannot be done and so, I just try it.

 

Also, what I have seen around the (banner) industry is more a case of the client telling people they cannot use certain technologies because they're going to send it to people who don't know how to code to create variations and translations...

 

Now, closures... That's something apparently simple that I have yet to master. Be certain I will be looking into your demos and taking them apart to distil everything I can from them.

 

It all of that does indeed help me. Pixi is also on my list and getting back into Canvas and WebGL. It is just too much I want to dive in at the moment. Oh dear...

Link to comment
Share on other sites

  • 1 month later...

Great post! You did a good job reducing a lot of unnecessary bloat.
 
To make stuff reusable, I try to create everything programmatically from some type data source like a JSON file. For HTML, I like to convert it to JavaScript so that it can be used as a variable or a template.

 

Compiling templates is very common in frameworks like Angular, and is my preferred approach. Here's a demo where I create a bunch of images by compiling a template using lodash. String templates are part of ES6, allowing you to do the same thing I'm doing with lodash. Right now it looks like you can do this with the lastest versions of Chrome, FF, Edge, Safari, and Node.

 

See the Pen 076afe4fee0c798d134261a40e53cfb3?editors=001 by osublake (@osublake) on CodePen

 

Of course you don't have to use template. You could just create and append elements. Here's another demo where I fill a table with data by creating elements. All the map reduce chaining I'm doing is similar to how React creates the DOM.

 

See the Pen LpKzZj?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks Blake,

 

Very nice tips. I do try to make my workflow as modular as possible but it is not always possible. There is still al lot of people in the banner development world that is only used to work with Flash's timeline so, there is only so much you can do before people don't know what you have done.

 

I do hope that as we go along and share ideas/tips/workflows, we get to work in a similar manner and make each other's life a lot easier.

 

Pyramidum and Joe's BannerTime is a nice approach that I hope will catch on (although I still need to sit down myself and have a play with it, and I have my own automated task runner.).

  • Like 1
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...