Highlighted

The Panache Animator for Dreamweaver...

Mentor ,
Nov 13, 2018

Copy link to clipboard

Copied

Almost done

Here is a second sneak peek:

Panache

We're still adding features, so if anyone is interested, we'd love to hear your suggestions (within reason).

Views

475

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

The Panache Animator for Dreamweaver...

Mentor ,
Nov 13, 2018

Copy link to clipboard

Copied

Almost done

Here is a second sneak peek:

Panache

We're still adding features, so if anyone is interested, we'd love to hear your suggestions (within reason).

Views

476

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 13, 2018 0
Adobe Community Professional ,
Nov 13, 2018

Copy link to clipboard

Copied

Looks slick.

Is there going to be any direction/alert/function within the interface to remind users to create skip animation buttons/links?

It's especially necessary if they create full page animations like your demo.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0
Mentor ,
Nov 13, 2018

Copy link to clipboard

Copied

Thanks, Jon. It'll skip with a behaviors suite that can be used to create stop and replay buttons. I'll add one to the "peak" page later. The info itself is never really hidden, though, so no Google or accessibility concerns.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0
LEGEND ,
Nov 14, 2018

Copy link to clipboard

Copied

Just a quick question AL,

Do you plan on including 3d transforms?

I am thinking of someone using 3d transform to 'flip' the text, then have it fade out as the new text fades in, (just an example).

Also will it automatically generate the webkit prefixed properties for Safari, (desktop and iOS)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2018 0
Mentor ,
Nov 14, 2018

Copy link to clipboard

Copied

pziecina  wrote

Just a quick question AL,

Do you plan on including 3d transforms?

I am thinking of someone using 3d transform to 'flip' the text, then have it fade out as the new text fades in, (just an example).

Also will it automatically generate the webkit prefixed properties for Safari, (desktop and iOS)?

The animations are all CSS-based and carried in a CSS file. Even the implosion and typing animations, which require scripting to address the individual characters or word, call on a block of CSS rules for the actual animations. So, while the initial release has no animations that require 3d transforms, we probably will be adding some. As for prefixes, where they are needed, they are in the CSS file and sandboxed from the script and the UI.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2018 0
Mentor ,
Nov 14, 2018

Copy link to clipboard

Copied

Hi Paula,

With your extension developer experience, perhaps seeing the UI will help you understand our approach:

ui-home.png

Workflow:

  1. Select element in design or code view that you wish to animate
  2. Select a viewport from existing page elements to set the animation boundaries
  3. Select a trigger: Manual On Load, When Scrolled to, When in View
  4. Select an Animation: Slide from left-right-top-bottom, Zoom, Fade, Typewriter, Implode Characters, Implode Words, Elastic Characters, Elastic Words
  5. Set a duration
  6. Set a delay
  7. Include Fade with animation
  8. When Done: Fade Out after XX seconds for a duration of XX seconds
  9. Assign user classes to either root or animated item

There's also a Control Behavior suite to do stuff like Skip Animation, replay, etc.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2018 0
LEGEND ,
Nov 14, 2018

Copy link to clipboard

Copied

Thanks for showing the ui, with workflow.

To add to the 3d animations for the future, are you planning to implement 'scale' at some point?

An addition I would like to see, is probably the complementary opposite of the one Jon suggests -

'the ability to replay animation', without having to scroll it into view.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2018 0
Mentor ,
Nov 15, 2018

Copy link to clipboard

Copied

We can do a lot of things. At this point, though, 3d animations server one primary purpose, and that is to trick Google Chrome into turning on hardware acceleration to render smoother animations. I've never been a fan of over-the-top animations (WOW slider comes to mind) because eventually all of the matrices and Bezier curves can cause some browsers, on less-then-high end computers to start wheezing 😉 We'll see though. If you had to come up with additional animations for this kind of tool, what would you choose?

By the way, based on Jon's comment, I added Skip Animation and Replay controls to this page:

Panache

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2018 0
pziecina LATEST
LEGEND ,
Nov 15, 2018

Copy link to clipboard

Copied

ALsp  wrote

If you had to come up with additional animations for this kind of tool, what would you choose?

I think it would be something similar to some of what I use, (remember the context menu).

This may be a little vague.

An image of lets say an aircraft, (no surprises there ) in which various parts of an aircraft are named, with a brief description of them. Lets say - fuselage, wing (or more commonly mainplane these days), engines, undercarriage, tailplane, fin, rudder, etc.

With each item being shown and highlighted or pointed to individually for a short time, along with brief description, (ability to pause would help users).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2018 0