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: Checking if Firefox: // check if Firefoxvar FF = ! Checking if IE and IE versions: Checking for Touch support: 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. B. C. D. Chris Gannon | 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? So it got me thinking – what if you could get simple components that are totally customisable to your needs? How They Work Take the Brightness dial as an example (in the image above). Or a slider’s code would be something like this: 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. What exactly is GSAP? The GreenSock Animation Platform is a suite of tools for scripted animation. TweenLite: the core of the engine which handles animating just about any property of any object. Loading the GSAP files Check out the download screen where you can download a zip containing minified and uncompressed files, or you can just paste a CDN link right into your page. Since TweenMax includes TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin, this one file gives you tons of goodies to play with and the CDN should help things load very quickly.
Of course you don’t need to use CDN links at all. Looking for a jQuery plugin? Easing. 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 -moz- -o- -webkit- -ms- -no-more- These features work in virtually all modern-day browsers (see caniuse.com for details about browser support for each feature). 3D Transforms Browser support: GOOD (Chrome 12, Safari 4, Firefox 10, IE 10, iOS 3.2, Android 3.0) see details GSAP makes it a breeze to create amazing 3D effects.
In order to get the most out of these 3D properties, it's important to understand how perspective and transformPerspective work. No transformPerspective No visual distortion at all. Caveats: textShadow boxShadow sharp shadow blur shadow. 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. What’s so-golly-gee-wilkers-nifty about Greensock? It must be admitted our initial, superficial impression of GSAP was based 100% on its logo. I’m pleased to say each of these claims held true in practice. Glory be to Greensock!! Moment of Zen. 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: -Demonstrations of the files available in the downloads -Overview of what a BlitMask is -The horrible Movie Clip looping technique that BlitMask wrap replaces -How to set up your first BlitMask -How to generate a seamless scrolling loop from a single image using BlitMask’s wrap property What is a BlitMask A BlitMask allows you to take a virtual snapshot of any DisplayObject and store it’s pixel data in memory.
Single Digit Random Spin with BlitMask Wrap AS3 Code Added BONUS! Best, Müller-Brockmann's Green Socks—A Greensock Demo Site.