Make a folded object completely hidden after folding

[Clifton]

The function createFoldingObj() is designed to fold down to a minimum height of 10 pixels. However, if a folded object must hide completely when folded, then try leveraging the on user event of the folded object. The PowerPac sends the following string values with user events to folding objects created with this function:

• on user event with value = "begin down"
• on user event with value = "end down"
• on user event with value = "begin up"
• on user event with value = "end up"

OBJECTIVE:
When folded object receives an on user event with the "end up" string, we will animate the hiding of the entire folded object. To handle the animation we will use pgAnimateCSS().

HOW TO DO IT:

1. Draw a text field; name it "Fold_1" and fill it with some text as shown.
   

   

   Create field named "Fold_1" and fill with text

   Image 2.png (23.13 KiB) Viewed 5576 times

2. For the on load page event of the field, execute createFoldingObj() to build a folding object out of our field.
   

   

   Execute createFoldingObj()

   Image 3.png (48.37 KiB) Viewed 5576 times

   
   Execute pgAnimateCSS() with all parameters empty to initialize the CSS animation libraries (improves response time on first usage).
   

   

   Call pgAnimateCSS() with all parameters empty (initializes CSS libraries)

   Image 4.png (39.96 KiB) Viewed 5576 times

3. For the on user event, add an action that checks for our "end up" string.
   

   

   Execute pgAnimateCSS() to animate hiding the folded object

   Image 5.png (48.37 KiB) Viewed 5576 times

   
   OPTIONAL: Only for sake of this example, execute pgTBObjSet() to show the folded object after about 5 seconds.
   

   

   OPTIONAL: Reshow the folded object after 5 seconds

   Image 6.png (47.5 KiB) Viewed 5576 times

4. Turn on Enable IE HTML 5 Display and export the page and test it in your favorite browser. When you click to fold the object, it responds to the on user event when the fold has completed and then the action executes the pgAnimateCSS() animation to hide the object. The object will reshow itself after 5 seconds but that is only added for the sake of this example. The result is pretty cool!

Of course you can adjust the parameters and actions to achieve other results that fit your project.
NOTE: If you must make this IE8 compatible, then use pgAnimate() or fadeObject() instead of pgAnimateCSS().

FoldingObjectExample.zip

Download tbk (ToolBook v11.5)

(46.77 KiB) Downloaded 573 times

[Darrel]

This is awesome, Clifton! I combined it with a zoomIn/zoomOut animation for another really cool effect.

[Clifton]

UPDATED: April 10, 2017
This would be best handled by using pgAnimateCSS() with object notification at the end of the animation loop. This very nice effects function is available in PowerPac v12.9x and has been greatly expanded and enhanced in PowerPac v13.180.x.