STEP 11: Editing Transitions

From Frontal Wiki

You may have noticed that each time you move from section to section on your site, the content fades in and out as you go from one to another. In Frontal, you have the ability to fully customize these transitions. Locate the following lines in your document (almost half way down):

<!-- SECTION TRANSITIONS -->
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="5" delay="0" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="5" />

In this block of code, you’ll notice two lines that both begin with "<transitioner>". The first one is the transition that occurs as you're leaving a section, the second occurs as you're entering a section. Below are some examples of other transitions that you can use. Take note of how these transitions can be combined to create more complex results:

Fade and Blur In/Out:

<!-- SECTION TRANSITIONS -->
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="5" delay="0" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="5" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="blur" start="0" finish="10" duration="5" delay="0" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="blur" start="10" finish="0" duration="10" delay="5" />

Fade and Slide Left/Right:

<!-- SECTION TRANSITIONS -->
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="5" delay="0" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="5" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="left" start="-500" finish="0" duration="10" delay="5" />

Fade and Slide Top/Bottom:

<!-- SECTION TRANSITIONS -->
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="5" delay="0" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="5" delay="5" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="top" start="-500" finish="0" duration="5" delay="5" />

Notice the similarities between these transitions – how changing the property, start, finish, duration, and delay effect the transition. You can find a more detailed description of transitions at:

http://www.frontalcode.com/wiki/index.php/Transitioner

Slide Show Transitions:

You may have noticed that the transitions for the slide shows in your portfolio details view are different from the ones used for the section-to-section transitions. Locate the following line in your document (about 3/5 of the way down):

<!-- PROJECT 1 DETAILS -->

A few lines below this, you’ll find some more lines containing "<transitioner>", similar to the ones you saw for the section-to-section transitions. These are the transitions used for the slide show of project one. Above these, you’ll notice a line reading:

<!-- Simple Fade -->

This is a quick description of the transitions being used. Each project provided in the Frontal Portfolio Site uses a unique set of transitions, and each contains a brief description of the transition taking place. You can use these project slide show transitions as alternative transitions that you can cut and paste in place of others (including the section-to-section transitions).

Review:

Transitions are a very powerful feature in Frontal, and can be used to create all kinds of effects and animations. An advanced understanding of these can really help you bring your site to life, so you're encouraged to go through each project slide show and observe the transitions being used.

</br> </br>