Transition FX

I’m trying to create a subtle little effect on one of my intro pages and so far the best way I’ve found is with the TransitionFX action. However …

I have 3 text boxes and I would like the effect to load on them consecutively from left to right. So; page loads, effect 1, then effect 2, then effect 3. One after the other.

The idea is to add a small visual hint, to a page which highlights the slideshow controls. (I’ve found that people don’t really notice the controls or how to use them, so I’m trying to give a little subtle help).

Problem :

TransitionFX is somehow obscured on the 2nd and 3rd boxes. Is this something I can overcome in my inline layout, or do I have to think of another way?

(Also … if there are any other actions out there that could do a better job, I’d love to know about them. I couldn’t find any. :frowning: )

http://www.grantsymon.com/e/controlstest.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

May I suggest using animate.css … http://daneden.github.io/animate.css/

Use custom CSS to apply a delay of 0s, 0.5s and 1s to each div, apply these classes via the Extended option (Cmd+X), use the

tab.

Why animate.css? Because of the pure css approach, the variety … name it. I love it, and it can be combined with so much more.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

CORRECTION : DON’T SELECT THE

TAB, BUT THE
TAB TO ADD CLASSES TO A DIV

Examples css styles to delay the applied css animation:

.delay-05s {
  transition-delay: 0.5s !important; 
}

.delay-1s {
  transition-delay: 1s !important; 
}

Then (example) …

  • Select a div
  • Cmd+X for Extended …
  • Select
    tab
  • Name : class
  • Value : animated fadeInDown delay-1s (yes, 3 classes … 2 for animation, 1 for delay)

Don’t forget to link an external stylesheet (animate.css) in order to make the animations even possible :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, for your icons you might want to use fontawesome Font Awesome

Keep 'm sharp and scaleable :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Richard.

I wish I understood this process. I can’t find anything in FW help (nothing!) and there’s probably threads here, but I could spend days reading through stuff I don’t understand trying to pick it apart. I’ve already spent an hour this morning and am none the wiser. :frowning:

To use/add Custom CSS, do I …

1/ Create a Style via the Edit Styles/Extended dialog?
2/ Paste in the code (or the relevant part of the code I want)?
3/ Create a link to this Style’s Name, in the Head section of the page I want it to appear on?
4/ Select the Item I want it to be applied to in my FW doc and via Item/Extended, create a new Div attribute and add the name of the Style I just created?

Lost …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Forgot to say … the effects look pretty useful.

Is there a reason why this can’t be done with an action? Can actions not do css?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Richard, these transitions are very beautiful. Nice tip. If you don`t mind, I would be interested too in a bit more detailed instruction.

Thanks a lot,
Hanna


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

They can. In fact my AnimationFX Action that ships with the Monarch template (http://www.freewaystyle.com/monarch/) uses both animate.css and Wow (http://mynameismatthieu.com/WOW/) to animate items as they scroll into view.
Regards,
Tim.

On 19 Jan 2015, at 10:55, grantsymon wrote:

Is there a reason why this can’t be done with an action? Can actions not do css?


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options