Greensock

GreenSock. GSAP Demos / Snippets / Pens - Animation & Tweening (JS) - GreenSock Forums. Hello..

I had posted these before but i guess since we are sharing snippets, i figured i put these browser checks here so they are in one place for easy access: If you need to check Firefox, IE, Chrome, Opera 18+, and Touch Support.. without checking the user agent, which can be spoofed... Of course you could use Modernizr. But sometimes you just need less code to check for what browser is what.. To target if the browser is Chromium based, use this: // this targets Google Chrome and Opera 18+var isChromium = window.chrome;if(isChrome === true) { // is chromium based browser} else { // not chromium based browser} To target if the browser is Google Chrome, use this: var isChromium = window.chrome, vendorName = window.navigator.vendor;if(isChromium === true && vendorName === "Google Inc.

") { // is Google chrome} else { // not Google chrome} To target if the browser is Opera 18 or above: CSS Animations: Workflow Issues Exposed [Includes Videos] You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it.

If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See for details. Use at your own risk. No warranties are offered. This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc.

I. II. B. C. III. B. IV. V. B. VI. VII. Interactive design experiments and thoughts. Click me for an interactive demo!

A few people have asked if they can have a play with the UI I showed in this blogpost/Vine so here it is. They are created solely using Greensock and CSS3, taking full advantage of the Draggable utility and ThrowPropsPlugin. Please bear in mind this is a very early prototype and most of the components aren’t hooked up to anything yet. A Bit of Background As the web matures its abilities are no longer confined to the dark recesses of a tablet or computer screen – we can now code JavaScript to control hardware devices using systems like Arduino and Tessel. Who hasn’t bought a device, whether it be a washing machine, music player, TV and become utterly frustrated with the way the manufacturer has forced you to interact with it? Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) Quick links: Jump Start Introduction Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive.

The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did. 3D Transforms & More CSS3 Goodies Arrive in GSAP JS. GSAP's CSSPlugin is now super-charged to handle some slick new CSS3 properties like 3D transforms, boxShadow, textShadow, borderRadius and clip.

Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today. [Note: the animation below is NOT a video - it's regular DOM elements being animated with GSAP. And yes, the scrubber works!] 3D transforms textShadow boxShadow borderRadius clip. Tight-Knit Javascript Animations: Exploring the GreenSock Animation Platform (GSAP) THE ABSTRACT (tl;dr) The GreenSock Animation Platform (GSAP) is an excellent choice for javascript-based animations.

Check out a demo: Josef Müller-Brockmann Knittin’ GreenSocks But you should really read the juicy narrative below. Let us embark upon a narrative, a verbal and visual journey during which we shall learn to refrain from judging the GSAP by its crudely drawn logo—a stickman with a glowing green elephantitis foot—and, instead, celebrate its merits as the most-kickingest-of-ass-of-all-javascript-animation-frameworks. In the recent past, a couple lucky souls of the Carbon Five ilk were enlisted in an effort to create a visually splendiferous HTML5 experience boasting animation-heavy, interactive data visualizations. And thus our search began. Use BlitMask's Wrap Feature for Easy Bitmap Scrolling and Looping.

The swf above illustrates 32 BlitMasks running simultaneously.

The slick performance absolutely stomps any other method available for moving so many bitmaps at the same time. Silky, smooth and totally seamless! Remember those days of trying to do a seamless scrolling loop in Flash? You would make 2 copies of a Movie Clip and move them both across the screen only to painstakingly have to offset the whole mess to perform a seamless loop? GreenSock’s BlitMask wrap feature ends all that.

Watch the Video The video covers: Müller-Brockmann's Green Socks—A Greensock Demo Site.