Change View Letter to Icon

[gp48maz1]

Each Icon will be a little different but just focusing on the Letter Icon right now because that is all we have.

ICON: The icon will be the same icon that is in the create page for the letter section.

PLACEMENT: Change View Letter to have an icon placed half way down the right side. We will add in more buttons later (like a resume button) and they will be above or below or on the other side.

LOOPING ANIMATION: The looping animation will only loop as long as the user hasn't clicked on the icon. The Icon is a square, and it will rotate 360 degrees every 1.5 seconds. Also to potentially have the icon feel more light/fun, right before it rotates 360 degrees, maybe kick it back 5-8 degrees to make it feel like its winding up. I can't really put time intervals on the kick back and the full rotation. I will try to find an example -- if i do i will add it to this section.

After the Icon Rotates 3 times (assuming it hasn't been clicked on yet) it will expand to 2.5 times its size with back shadow to give depth and the icon will flip and say "Read Me". The size change will take .5 sec, the Read Me will flip in .5, then stay for 1 sec, then shrink back down in .5 and text disappears at the same time.

Then the loop will continue.

TRANSITION TO LETTER: Two Options 1) Stick with the Flip. If we stick with the flip first , when the user clicks the icon it will flip and then the whole Token will. Kinda like a wave effect where one flip causes the 2nd flip 2) Adopt a splash approach: http://codepen.io/balapa/details/zGRXgr or http://codepen.io/balapa/pen/embYYB. If we go the second route I see combing both ( I am leaning this direct overall)

If route 2 is taken -- When the Letter Icon is clicked it will pulse like the first link and then jump to the center of theToken. Then it will ripple the whole token white. Then text would fall in.

CHANGING THE LETTER: This will be its own ticket but it is related to the 2nd link from TRANSITION TO LETTER. Instead of just texting falling in I want the letter section to look like the back of 2nd link (cause it looks awesome):

The top section will have two parts -- a background image and and icon. For every non business user the background image will be black gradient. and the icon will be the GiveToken logo. For business users they can choose a background image, and they can use there own logo.

The bottom section I would say has 3 parts: header, main body text, icons. For us there will be 3 sections: 1) header and main body (because we don't have them separated) 2) Social Media Icons (left) we may make these optional 3) attachments (right) , Josh is working on making icons for the attachments for PDF, word doc... Since we don't have social media it will just stay two sections to begin with attachments optional of course.

TRANSITION BACK TO THE TOKEN: If we went with the flip when the icon flips, it should flip from text icon to bento icon. The user will click it and once again it will in order flip icon then bento back.

If we go with the second option, after the Letter has had all of it parts fall in, a bento icon should appear on the right -- right where the letter icon was. When clicked it will flip back to bento (in order, first the icon then the letter.

[gp48maz1]

Only if letter is deemed appropriate

[wogsland]

Is this a feature we're still considering implementing?

[wogsland]

Deprecating classic token.