Download - How to Extend Axure's Animation Capability
![Page 1: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/1.jpg)
Here Be Dragons How to Extend Axure’s Animation Capability
by Svetlin Denkov @svetlindenkov
+
![Page 2: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/2.jpg)
Who Am I?
![Page 3: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/3.jpg)
WHO AM I Svetlin “Svet” Denkov **Pseudo name on Axure Forums = light_forger
� UXer with passion for IxD & Vis. Design � DePaul HCI Graduate
� Constantly evolves own prototyping tool kit with different technologies
� Writes and presents when the muse strikes him J
� Oh, and a GoT fan! Go crows!
![Page 4: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/4.jpg)
What We Will Cover
![Page 5: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/5.jpg)
WHAT WE WILL COVER Topics & Demos - Animation limitations of Axure 7.0 - How to do code injection - Basics of using CSS and jQuery - Transitions and Transforms in CSS3 …and if time allows (fingers crossed): - Building custom Bezier curves - CSS Filter property **Main content will be supplemented by a series of demos!
![Page 6: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/6.jpg)
WHAT WE WILL COVER Not in Scope - Multi-line code injection with Axure Plugins - CSS 3D rotations and perspective property - Taking it further with SVG - External animation libraries such as Velocity.js **Feel free to drop me a line at @svetlindenkov after the presentation with questions.
![Page 7: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/7.jpg)
WHAT WE WILL COVER Code Notation stuff – Axure actions/events or jQuery/CSS code <stuff> - Code placeholder stuff – Putting extra attention **I promise, this will be entertaining. No, really! J
![Page 8: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/8.jpg)
Axure & Animation
1
![Page 9: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/9.jpg)
AXURE & ANIMATION Robust Event Model
widget-based
page-based
![Page 10: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/10.jpg)
AXURE & ANIMATION Rich User-customizable Actions
![Page 11: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/11.jpg)
AXURE & ANIMATION Some Level of Transition Support
“Show” action
“Set Panel to State” action
![Page 12: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/12.jpg)
AXURE & ANIMATION Capabilities - Moving widgets by a distance/to a location - Changing state of a widget via dynamic panels - Showing/hiding widgets - Scaling widgets - Text manipulations
![Page 13: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/13.jpg)
AXURE & ANIMATION Painpoints - No widget rotation of widgets on different axes Source: http://bit.ly/1L9RJSa
- No simultaneous animation of multiple widget properties Source: http://bit.ly/1exZkxM
- Can’t specify an animation origin Source: http://bit.ly/1LpZNfG - And others: scaling, animating to an opacity, no custom animation curves, etc.
![Page 14: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/14.jpg)
“Dracarys!”
(Painpoint demo)
![Page 15: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/15.jpg)
Identified Solution
(Let’s tackle the dragon!)
2
![Page 16: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/16.jpg)
IDENTIFIED SOLUTION Prototype Structure - Axure prototypes have mostly HTML and CSS files
![Page 17: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/17.jpg)
IDENTIFIED SOLUTION Role of jQuery - Axure uses custom version of jQuery called AxQuery
![Page 18: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/18.jpg)
IDENTIFIED SOLUTION Prototype Code - Each widget has a unique id in the HTML (and name if given one)
![Page 19: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/19.jpg)
IDENTIFIED SOLUTION Next Steps - Based on Axure’s inner workings, we can do code injection on widget <div>s via CSS3 and jQuery
BUT
- What about Axure 8.0 beta, which comes out this summer?
Source: http://bit.ly/1It92Lp
![Page 20: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/20.jpg)
IDENTIFIED SOLUTION Axure 8.0 beta
Source: http://bit.ly/1Fzn4H1
![Page 21: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/21.jpg)
IDENTIFIED SOLUTION Axure 8.0 beta (cont) - Surprise!!! 2 days ago Axure announced improved animation support (secretly grinning here J) - So what has been confirmed so far? � Rotation action � Multiple animations at once - Need more details on the following � Animation origin � Dynamic Panel 3D rotations
![Page 22: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/22.jpg)
IDENTIFIED SOLUTION Why This Talk is Relevant - It will be a while before we can use Axure 8.0 animations for production ready projects - The method to be presented is useful for any code injection - More robust control over easing functions - Animations not yet available in 8.0 such as blurs, tonal changes, animating shadows, etc.
Source:
![Page 23: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/23.jpg)
Code Injection Methods
3
![Page 24: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/24.jpg)
CODE INJECTION METHODS Method 1 - Axure Plugins
![Page 25: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/25.jpg)
CODE INJECTION METHODS Method 1 - Axure Plugins (cont.) - First introduced in Axure 7.0 as part of the AxShare service - Used for attaching HTML/CSS/Javascript code blocks - Each AxShare project has this feature - One or more plugins can be attached in the header, footer or a dynamic panel of a page
![Page 26: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/26.jpg)
CODE INJECTION METHODS Method 1 - Axure Plugins (cont.) - For more information, check this resources out:
http://bit.ly/1CjPvsi
http://bit.ly/1GZzw8d
Axure Supplied Info: Examples:
http://bit.ly/1Bu7UYl
http://bit.ly/1Nd86g5
http://bit.ly/1l6Rsn0 http://bit.ly/1Ftjr5d
Detailed Walkthrough:
![Page 27: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/27.jpg)
CODE INJECTION METHODS Method 2 – Third-party Hacks
![Page 28: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/28.jpg)
CODE INJECTION METHODS Method 2 – Third-party Hacks (cont.) - Finer control wanted for a long time, resulting in many user attempts of hacking Axure - A variety of options: custom libraries (.rplib), external JS files, and code read in from local widgets - Use these approaches with caution! Many may not work properly or at all as Axure evolves
![Page 29: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/29.jpg)
CODE INJECTION METHODS Method 2 – Third-party Hacks (cont.) - There is too much variability with this method, so we won’t cover it, but if your curiosity grabs you:
Zeroskillz’s http://bit.ly/1Rjsywl
ColinB’s http://bit.ly/1tfNQ6V
Different Attempts: Various Threads on JS:
http://bit.ly/1Lq4IgD
http://bit.ly/1K2CTxN
http://bit.ly/1I5S7jH
Rootnot’s http://bit.ly/1JasSOH
![Page 30: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/30.jpg)
CODE INJECTION METHODS Method 3 - Using Open Link in Current Window Action
![Page 31: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/31.jpg)
CODE INJECTION METHODS Method 3 - Using Open Link in Current Window Action (cont.) - Method discovered back in v6.0 by power users - Quick way of executing short code without Axure Plugins - This is the high level flow: 1. We pick the event we want to use e.g., OnClick 2. Pass an Open in Window action 3. Select Current Window option 4. Past inline the code to be executed 5. Magic happens!!!
![Page 32: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/32.jpg)
“Dracarys!”
(“Open Link in Current Window” demo)
![Page 33: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/33.jpg)
“Open Link in Current Window” Method Details
4
![Page 34: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/34.jpg)
METHOD DETAILS Pros - Anyone can learn it. Yes, anyone!!! - Quick to implement and use - Will work as long as your browser is supported Cons - Doesn’t scale well for multi-line code - Readability of code is poor, so write it in Coda or Gedit - May not handle complex cross-widget interactions
![Page 35: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/35.jpg)
METHOD DETAILS Building Blocks 1. use javascript: keyword 2. select appropriate widget(s) 3. pass a method (action) and its argument list (values)
![Page 36: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/36.jpg)
METHOD DETAILS Part 1 – javascript: - It is an URI (Uniform Resource Identifier) scheme. In English? - It allows us to run JavaScript code (jQuery too): javascript:<statement 1>; <statement 2>; void(0); OR javascript:void(<single statement>); ß We will use this one! - It is evaluated on top of the existing prototype code
http://bit.ly/1BucuWA
http://bit.ly/1Bucupm
More on URIs: More on void keyword:
http://mzl.la/1x6OJC7
![Page 37: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/37.jpg)
METHOD DETAILS Part 2 – Select Widgets - Two different ways of doing this: Option 1: $axure(‘@<widget-name>’) – uses an Axure object (part of API) Option 2: $(‘[data-label=<widget-name>]’) – using jQuery and custom HTML5 data- attribute - I am sorry, WHAT??!!!
![Page 38: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/38.jpg)
METHOD DETAILS Part 2 – Select Widgets (cont.) - Let’s back up! Here is a primer on jQuery: $ or jQuery( ) = encapsulation object. It tells that jQuery stuff will happen. Obviously, there is more to this! (<stuff>) = query. Informs the DOM (Document Object Model), what we are searching for. Can use id, <> tag, class, etc.
http://bit.ly/1GcYBsA
http://bit.ly/1nJVbqD
More on jQuery object:
![Page 39: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/39.jpg)
METHOD DETAILS Part 2 – Select Widgets (cont.) Back to Option 1, $axure(‘@<widget-name>’): - Axure has an API built on top of jQuery called AxQuery - $axure is referencing that API - Has different support of jQuery methods - You can read a very detailed writeup here: http://bit.ly/1LaoG0P
![Page 40: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/40.jpg)
METHOD DETAILS Part 2 – Select Widgets (cont.) And back to Option 2, $(‘[data-label=<widget-name>]’): - Uses jQuery object and HTML5 data- property - Axure uses data-label for any named widgets. Name your widgets, people!!! - <widge-name> = name given to widget in Axure e.g., bs_Click
http://bit.ly/1d83j2h
More on data- property:
![Page 41: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/41.jpg)
METHOD DETAILS Part 2 – Select Widgets (cont.) - jQuery behavior differs based on whether using $ or $axure - .css() is not predictable. Some properties work (“color”), while others don’t (“background-color”, “height”) - Both topics require additional investigation
![Page 42: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/42.jpg)
METHOD DETAILS Part 3 – Use .css() Method - Can be used to modify CSS properties, but we will primarily use it for animations - It is a jQuery method that passes property: value pairs - Can be used for a single CSS property: <widget-name selection>.css(“text”, “Hello!”); - Can also be used for a long list of items: <widget-name selection>.css ({“text”:“Hello!”, “color”:”red”});
http://bit.ly/1SyZVxA
More on .css():
![Page 43: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/43.jpg)
METHOD DETAILS Putting It All Together - Open Link in Current Window: javascript:void($('[data-label=bs_block1]').text(”Drogon rules!")); and for kicks, let’s throw in $axure too to see change in behavior: javascript:void($axure('@bs_block2').text(“Told you he rules!”));
![Page 44: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/44.jpg)
“Dracarys!”
(Break time! jQuery demo)
![Page 45: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/45.jpg)
Let’s Build an Example with CSS Transforms
5
![Page 46: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/46.jpg)
CSS TRANSFORMS Targeted interaction = tap to remove item from grid of items. The animation will include: 1. Scaling widget by x3 factor 2. Rotating it by 50 degrees 3. Moving it out of the way by 1000px 4. Changing the opacity to 0% to hide it
Copyright of the cute fella is Game of Thrones (sold via POP): http://bit.ly/1eyj5oV
“BBQ, anyone?” - Drogon
![Page 47: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/47.jpg)
CSS TRANSFORMS Scale, Move, and Rotate - We can use Move and Set Panel Size Axure actions but that becomes complicating - We will stick to CSS3 Transforms, which creates a unified method for modifying the widget - But what are Transforms? Transformers!? Heck, no! We are fighting a dragon!
![Page 48: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/48.jpg)
CSS TRANSFORMS Background - Originally came from WebKit, then folded into 2 W3C Working Drafts, CSS 2D and 3D Transforms - More prominent in CSS3 which has good browser support - Transforms include translations, scalings, rotations, skewing and perspective changes - Last two are too much for today! Gotta keep you focused J
http://bit.ly/Y629ge
More on Transforms:
http://bit.ly/1fojScj
![Page 49: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/49.jpg)
CSS TRANSFORMS Background (cont.)
http://mzl.la/1ze7NPs Source:
![Page 50: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/50.jpg)
CSS TRANSFORMS Background (cont.) - We can add separate statements for each browser. Target one only for effectiveness - We will target Firefox with transform (also works for Chrome). For Safari, we need to use –webkit-transform - Transforms can be single value or multi-value: transform: <value1(arg1)> OR transform: <value1(arg1)> <value2(arg2)>
![Page 51: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/51.jpg)
CSS TRANSFORMS Part 1 - Scale - To scale an item we use: transform: scale (<number1>, <number2>) <number1> is the scaling factor for the x-axis <number2> is the scaling factor for the y-axis - To grow symmetrically we can use the same value for both - There are also scaleX(<number>) and scaleY(<number>)
![Page 52: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/52.jpg)
CSS TRANSFORMS Part 2 - Move - To move an item we use: transform: translate (<number>px) <number> is the end x-coordinate of the end state - translate = translateX - Translate can also be used with 2 arguments: translate(<number1>, <number2>), but for our purposes we will move the item on the X-axis only - There are also translateX(<number>) and translateY(<number>)
![Page 53: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/53.jpg)
CSS TRANSFORMS Part 3 - Rotate - To rotate an item we use: transform: rotate (<number>deg) <number> is the number of degrees of rotation we want for the end state - rotate = rotateZ or rotation on the Z-axis (the plane facing us) - There are also rotateX (vertical card flips) and rotateY (horizontal card flips)
![Page 54: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/54.jpg)
CSS TRANSFORMS Part 4 - Opacity - To change the opacity we can use the opacity property: opacity: <number> <number> is % of opaqueness in decimal: 0 = transparent, 1 = fully visible. We will use 0. - Name of the property is opacity in all browsers - This is not a Transform property
![Page 55: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/55.jpg)
CSS TRANSFORMS End Statement - Written for Firefox: javascript:void($('[data-label=img_drogon]').css({"transform":"scale(3,3) translate(1000px) rotate(50deg)", "opacity":”0"})); - We will modify it slightly. You will see why! javascript:void($('[data-label=img_drogon]').css({"transform":"scale(3,3) translate(200px) rotate(50deg)", "opacity":"0.2"})); - As homework, read on transform-style and transform-origin!
![Page 56: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/56.jpg)
“Dracarys!”
(CSS Transforms demo)
![Page 57: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/57.jpg)
Adding CSS Transitions
6
![Page 58: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/58.jpg)
CSS TRANSITIONS Background - Last example didn’t animate. For this, we need a CSS Transition - Similarly to CSS Transforms, CSS Transitions originated with the WebKit team and later folded in own W3C draft - Now integral part of animating CSS Transforms as per CSS3
http://bit.ly/1BFMibH
More on Transitions:
http://bit.ly/1Gdp4WO
![Page 59: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/59.jpg)
CSS TRANSITIONS Background (cont.)
http://mzl.la/1eV9SiA Source:
![Page 60: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/60.jpg)
CSS TRANSITIONS Background (cont.) - Axure has animation type (ease in) and duration (500 ms). CSS3 Transitions have: property – element being animated duration – identical to Axure timing function – similar to Axure delay – similar to Axure’s Wait action
![Page 61: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/61.jpg)
CSS TRANSITIONS Background (cont.) - Each has an associated CSS property: 1. transition-property 2. transition-duration 3. transition-timing-function 4. transition-delay - Can be used individually or via a shorthand: transition: <property> <duration> <timing function> <delay> - Remember, we are using transition which works for Firefox and Chrome. For Safari it is –webkit-transition
![Page 62: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/62.jpg)
CSS TRANSITIONS Part 1 - transition-property - Acts on one or comma-separated list of CSS properties - Default value is all, which is what we will use: transition: all <duration> <timing function> <delay>
http://bit.ly/1TEpj6z
More Info:
![Page 63: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/63.jpg)
CSS TRANSITIONS Part 2 - transition-duration - Uses seconds in the format <number>s - So we can see the transition details, let’s use 4 seconds or 4s: transition: all 4s <timing function> <delay>
http://bit.ly/1Ird4kY
More Info:
![Page 64: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/64.jpg)
CSS TRANSITIONS Part 3 - transition-timing-function - It can use a built-in value such as ease-in or custom Bezier curve (more on that later) - For our example, let’s use ease-in or gradually speeding up: transition: all 4s ease-in <delay>
http://bit.ly/1K30Ch4
More Info:
![Page 65: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/65.jpg)
CSS TRANSITIONS Part 4 - transition-delay - Similar format as transition-duration - We will use no delay, so the value will be 0s: transition: all 4s ease-in 0s
http://bit.ly/1GZVSqa
More Info:
![Page 66: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/66.jpg)
CSS TRANSITIONS Updated End Statement - We are adding transition: all 4s ease-in 0s - The jQuery written for Firefox looks likes: javascript:void($('[data-label=img_drogon]').css({"transform":"scale(3,3) translate(1000px) rotate(50deg)", "opacity":"0", "transition":"all 4s ease-in 0s"})); - Now we should be able to see a smooth transition
![Page 67: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/67.jpg)
“Dracarys!”
(CSS Transition demo)
![Page 68: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/68.jpg)
Time Check!!!
![Page 69: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/69.jpg)
Custom Timing Functions
7
![Page 70: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/70.jpg)
CUSTOM TIMING FUNCTIONS Background - Earlier we discussed CSS has pre-built timing functions such as linear, ease-in, ease-in-out and others - These are considered specific implementations of a Cubic Bezier curve - Animation behaviors come into two flavors: swings and curves (Cubic Bezier curves), so let’s review each briefly
![Page 71: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/71.jpg)
CUSTOM TIMING FUNCTIONS Swings - Axure has this as a built-in value swing - Swings are how springy an item is e.g., bounce of a ball - A swing has tension, friction, velocity, tolerance (RK4 spring). There are also DHO springs - CSS natively does not YET have spring property. This may be simulated via animation keyframes, but requires more research
http://bit.ly/1ALicze
More on Swing with CSS:
http://bit.ly/1K3gw9V
![Page 72: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/72.jpg)
CUSTOM TIMING FUNCTIONS Curves - Axure has some built-in values ease in, ease in out, etc. - We have two points in space and a cubic curve (x3 curve) between them - The curve determines the animation progress over time
http://bit.ly/1EeJXi7 http://bit.ly/IFqq5p
More on Curves:
![Page 73: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/73.jpg)
CUSTOM TIMING FUNCTIONS Custom Cubic Bezier Curves - Certain implementations are provided as built-in CSS values - We can build our own using: cubic-bezier(<x1>, <y1>, <x2>, <y2>) where the numbers specify the x/y coordinates of the 2 points - This can be confusing if we are just plugging numbers, so there are visual tools for this
http://bit.ly/1j89N0S http://bit.ly/1cMqCf2
More on Building a Curve:
![Page 74: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/74.jpg)
CUSTOM TIMING FUNCTIONS Building the Curve - Copy the value of the built curve and update the CSS Transition: transition: all 4s cubic-bezier(.08,.78,.89,-0.61) 0s - The jQuery updated for Firefox: javascript:void($('[data-label=img_drogon3]').css({"transform":"scale(3,3) translate(1000px) rotate(50deg)", "opacity":"0", "transition":"all 4s cubic-bezier(.08,.78,.89,-0.61) 0s"}));
![Page 75: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/75.jpg)
CUSTOM TIMING FUNCTIONS Integrating - To modularize the code we can save the curve to an Axure global variable and re-insert it in the code: varTestAnim = cubic-bezier(.08,.78,.89,-0.61) - The jQuery re-updated for Firefox: javascript:void($('[data-label=img_drogon]').css({"transform":"scale(3,3) translate(1000px) rotate(50deg)", "opacity":"0", "transition":"all 4s [[varTestAnim]] 0s"}));
![Page 76: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/76.jpg)
CUSTOM TIMING FUNCTIONS Best Practices - Keep animations between 150ms and 350ms - Staging is important: for multiple animating items, what’s the order and timing of each - Introduce animations only if they bring value to the overall user experience
http://bit.ly/1PgMzHY
More on Best Practices:
![Page 77: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/77.jpg)
“Dracarys!”
(Custom Cubic Bezier curve demo)
![Page 78: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/78.jpg)
Going Further with CSS Filter
(We killed the dragon.
Now let’s get its genome!)
8
![Page 79: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/79.jpg)
CSS FILTER Background - What about dynamic blurs, tonal changes, and drop shadows? Sure. We can do that! - Enter the filter CSS property - It is in draft form (W3C Filter Effects Module), so it is not officially released, yet most main browsers support it - Used to apply images effects, but we will hack it for any widget (insert evil laugh here)
http://bit.ly/1K5L9LK
More on Filter:
http://bit.ly/1G0g61j
![Page 80: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/80.jpg)
CSS FILTER Background (cont.)
http://mzl.la/1eyTKLz Source:
![Page 81: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/81.jpg)
CSS FILTER Basic Syntax - It uses the familiar property: value approach: filter: <value(arg)> Just like transform multiple values can be stringed together: filter: <value1(arg1)> <value2(arg2)>
![Page 82: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/82.jpg)
CSS FILTER Re-Updated End Statement filter: blur(5px) grayscale(100%) drop-shadow(16px 16px 20px red); - Optionally we can replace opacity: 0.0 with filter’s opacity(0%) - jQuery rewritten for Firefox: javascript:void($('[data-label=img_drogon5]').css({"transform":"scale(3,3) translate(1000px) rotate(50deg)", "opacity":"0", "transition":"all 4s [[varTestAnim]] 0s", "filter":"blur(5px) grayscale(100%) drop-shadow(16px 16px 20px red)"}));
![Page 83: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/83.jpg)
“Dracarys!”
(CSS Filter demo)
![Page 84: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/84.jpg)
And Beyond?
(Cloning your own dragon!)
9
![Page 85: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/85.jpg)
AND BEYOND? When CSS/jQuery Is Not Enough - CSS3 offers even more: animations, perspective changes, masks and clip-paths, SVG object manipulation, etc. - We can even tie in 3rd party animation libraries via Axure Plugins: GreenSock (GSAP), Velocity, and others - The next level in animation is using tools such as: 1. Framer JS (code-based) 2. AfterEffects and Mitya (timeline-based) 3. Origami and Google Form (node-based)
![Page 86: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/86.jpg)
Summary
(You survived the battle!)
10
![Page 87: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/87.jpg)
SUMMARY Quick Takeaways - This is an experimental technique. Support in mobile depends on the browser quality - Transforms/Transitions can be applied to a single widget or a dynamic panel - CSS Transforms are written differently across browsers - Some CSS properties are not animatable via jQuery - Code is best written outside of Axure
![Page 88: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/88.jpg)
SUMMARY Closing Thoughts - Animations play a key part in interactions when done right - Axure animations right now have limitations, but 8.0 beta is going to change that - Regardless if use CSS3/jQuery with Axure or not, understanding code can expand your prototyping skills - Axure is great but not always the solution, so explore other prototyping technologies, too
![Page 89: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/89.jpg)
Questions?
(Polish your armor and ask away!)
**Take a look at the Additional Resources section for more goodies!
![Page 90: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/90.jpg)
That’s All, Folks!
light_forger
@svetlindenkov
Svetlin Denkov
![Page 91: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/91.jpg)
Additional Resources
11
![Page 92: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/92.jpg)
ADDITIONAL RESOURCES Presentation Resources - Generated prototype on AxShare - Source Axure .rp file
http://bit.ly/1e7XNxJ
http://bit.ly/1LtVwtX
![Page 93: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/93.jpg)
ADDITIONAL RESOURCES Books
![Page 94: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/94.jpg)
ADDITIONAL RESOURCES Specification Information - W3C - W3Schools - CSS Tricks Animation Libraries - Dynamics JS - GreenSock (GSAP) - Velocity JS
http://bit.ly/1kMucX1
http://bit.ly/1Cfzqnr
http://bit.ly/1SzFkJs
http://bit.ly/1sFYIq7
http://bit.ly/1hLLLc0
http://bit.ly/1hALtFq
![Page 95: How to Extend Axure's Animation Capability](https://reader031.vdocuments.net/reader031/viewer/2022012305/55cca847bb61ebd74c8b4588/html5/thumbnails/95.jpg)
ADDITIONAL RESOURCES CSS Code Examples SVG Code Examples
http://bit.ly/1FlQRs9
http://bit.ly/1TEFHUx
http://bit.ly/1ESt9B6
http://bit.ly/1MpYPRM