Jump to content
GreenSock

dneckles

role of css in workflow for gsap sites

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

Hey guys,

 

My background is of a flash as3 dev you know, where you are able to position things programmtically or in the IDE. I'm having a hard time adjusting to styling with the css language. I can do it but its not effortless.

Question is Do most folks using GSAP first style with CSS and that I need to get over the hump and do or is there another way people style and position? 

 

Thanks...

Link to comment
Share on other sites

Hey Dwayne,
 
Well you can position programmatically, but you'll still need to understand the way CSS works.
 
For example you can position an element using GSAP:

TweenLite.set(element
{
position:"relative",
margin:10,
backgroundColor:"#00F",
top:100,
left:200
});

This has the advantage that it saves you from writing all the vendor prefixes(if needed), but that can also be achieved using a CSS preprocessor(something that I personally recommend, it'll make your life quite easier). But as I said you still need to understand how that particular styling will or won't affect document flow, unless every element has an absolute position.
 
Is not written in stone or something like that but, as many other things in this business, is a learn by doing thing.
 
The way I work is setting initial styles with a regular stylesheet then, if necessary, I change particular styles using a set() method, specially if the element will be animated with GSAP. Also if elements are added dynamically, setting their styles with a set() instance is also a good choice, specially if those styles are not defined in the stylesheet.
 
For all the quirks and turns CSS has I recommend you to always search in CSS Tricks:
http://css-tricks.com/
 
Also stackoverflow is always a good place to search as well.
 
Also you can check this site, there are very good resources to catch:
http://www.css3.info/
 
And also you can get your hands into a book to learn the basics of CSS, I'd recommend you this one:
http://www.amazon.com/CSS3-Missing-David-Sawyer-McFarland/dp/1449325947/ref=pd_cp_b_0
 
Is not a short reading at all, but this one goes from basics to the most advanced sruff, but you can dismiss some parts that are not needed yet, it won't affect how you approach the rest of the book. Perhaps you can search in the "head first" series, or CSS for dummies(nothing personal implied ;)), because usually have a more simpler approach.
 
Also you could check codeacademy:
http://www.codecademy.com/en/tracks/web
 
But as I said this is something that you'll learn through the famous "aha!!" momentsm when you see the end result in the screen.

 

To answer your question directly, due to how things work in today's web, a site or app without CSS is almost unthinkable, specially since you have to work with so many browsers and devices. Also styling with CSS stylesheets is very useful because if you style everything with code, the document could render before all the scripts are loaded and executed, thus the site would look quite odd without the proper styles applied.

 

Finally you could take a look at Adobe's Edge Animate, since it looks very familiar to the Flash IDE and some very amazing stuff have been done with it.

Rodrigo.

  • Like 4
Link to comment
Share on other sites

I figured that I need to just get over the hump I just wanted to throw it out there to see how other folks work. Thanks Rodrigo for the comprehensive answer.

 

Link to comment
Share on other sites

Hi Dwayne,

 

Yes, CSS can be quite a hassle and it can take years to master.  Floats and margin-collapse sometimes drive me up the wall. I also don't think you should have to consult multiple tutorials to figure out "how to center an element vertically"... but alas I digress.

 

My advice is to keep things as simple as possible starting out and slowly go through those resources Rodrigo mentioned. 

 

If you are building full webpages you are certainly going to want to get a lot of CSS under your belt. 

 

When building animations like the ones below, where all the elements are confined to a single div on a page I just use position:absolute and provide the exact left/top values for everything. 

 

http://codepen.io/GreenSock/pen/yjGDd

http://codepen.io/GreenSock/pen/Fqmsa

  • Like 2
Link to comment
Share on other sites

Hello alwayzambitious, To add to Rodrigos' and Carls' great advice!

 

I usually setup my page with all HTML markup and then style and position with CSS.

 

You can setup your elements so the initial styles put the element in place or off stage if they will be animated in with to() and staggerTo().  Or you can use GSAP methods from(), fromTo(), staggerFrom(), staggerFromTo() tweens to animate your element onto the stage or in view.

  1. I usually setup my initial position and styles first
  2. And than it makes it easy to animate using GSAP, once everything is in the right place.
  3. Then you can worry about styling for look and feel.

That book that Rodrigo recommended is a great book on CSS3.

 

Recommended Books on CSS:

 

CSS3: The Missing Manual (great book and pick Rodrigo)

The Book of CSS3

CSS Mastery: Advanced Web Standards Solutions

The CSS: The Ultimate Reference (older, but great book on CSS foundation)

 

Here are some other links you might find useful:

 

CSS Reference Guide (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS Getting Started (MDN): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

CSS Developer Guide (MDN): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS

SitePoint CSS Reference: http://reference.sitepoint.com/css/propertyref

Web Platform CSS Wiki: http://docs.webplatform.org/wiki/css

 

Online learning @ TreeHouse:
 

http://teamtreehouse.com/library/css-foundations

 

Once you know the basics of CSS... positioning and styling your elements will get easier over time!

 

Hope this helps? :)

  • Like 2
Link to comment
Share on other sites

Thanks for the helpful responses guys. Really appreciate it. I will stick with it.

Link to comment
Share on other sites

Peacock Feathers

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

 

Insightful.. In the example above they use greensock ( with a little of jquery) to position the elements programmatically in the circle. In this case css wasnt used, so its case by case.

I'm seeing Its def a mix of both depending on what the initial layout is.  I just wanted to share....

 
 
feathersLeft.each(function( index, element ) {
  TweenLite.to($(element), 0, {rotation:(index+1) * -22, transformOrigin:'50% bottom'});
})
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.
×