drag the arrow to reveal the hidden picture
i made it for usage in our dps-app:
reveal.zip (895.0 KB)
@h_classen, you are awesome!
cool, but is it possible to create this by using hype symbols only and fill with content?
i created a version for a children app, but always have the problem, because of the pointer events of IE,
that if i use responsive symbols and don´t set x: -3000px and more, on a 30" screen left side is seen.index.hype.zip (906.3 KB)
Hi,
not sure if this is of any help, but my technique is not to slide sthg in but use a 0-px-width-div overflow hidden to hide content and expand it on drag or click …
using symbols or not should be of no matter in this evironment …
didn’t test on ie yet …
Hans
I want desperately to learn how to do this but I’m a very new Hype user. Is there any way you’d be able to take some screen shots of the process, or do a short screencast?
you can playwith the hype-docreveal.hype.zip (908.3 KB)
Thanks for posting 
Hi,
Very interesting stuff.
I am trying - unsuccessfully - to start with a picture HALF revealed with the double arrow in the middle of the picture.
Can you help please ?
Thanks
This is all about having the reveal group move in one direction and change width while the content moves in exactly the opposite direction. Set all keyframes to linear. Set the handle to control the timeline.
There are all sorts of possible variations, such as creating a stack of these with a vertical reveal to create a venetian blinds effect.
revealCenterStart.hype.zip (908.1 KB)
Lieb Herr Classen,
What would be the best approach to implement your program within a slideshow?
As shown by taking a look at the fifth slide in the following file.
Thanks for your help.
PYPlourde
A couple of days ago Hans posted briefly on this Forum and said he was on vacation… so it might be a bit before he responds.
hi, embed it as iFrame …
Hi Jim,
Thanks for the cue.
As you may know, Hans, even on break, suggested to use the iframe tag to answer my request. I thank him a lot and wish him good holidays.
I did some unsuccessful tests though with the proposed solution. So, I decided to try something else. I exported Herr Claβen’s Hype file program (with modified pictures for my need (1_havre.hype)) as an iBooks widget. I then copied the content within a new Html widget and made some changes to link files to resources folder.
My goal is to use the new html widget over a background image. The position will be absolute. No responsive scene.
I produced another file (1_havre_Essai.hype) which is fine in terms of positioning but the wipe effect is not working properly. I probably mess up the code a little bit. I am wondering if you might just take a look to help me to make it work.
Thanking you in advance.
PYPlourde
1_havre.zip (2.0 MB)
Hi Pierre!
I looked at your files & reviewed Hans’ code and I just don’t have the time right now to burrow into the issue and propose a solution - it would take me a while to wade through this.
I’m sorry I can’t be of more help - perhaps some one else is available?
Hello Jim,
Thanks. A solution will be find eventually and share with the board.
PYPlourde
Good morning,
I have been able to create a less sophisticated animation which suits my need fine. One reveal animation for each side.
Here the Hype file ( 1_havre_animation_av_ap.hype.zip (1.1 MB)).
This challenge is done. However, I still have a minor problem to make it work within a simple slider animation as shown in this example (1_havre_animation_glisser_test.hype.zip (2.1 MB).
I do not know exactly how to integrate the reveal animation in the other one.
If someone has a clue for that, I would be grateful.
Thanking you in advance.
PYPlourde
Hi Pierre
So I’ve given things a go but what follows is an example not a finished piece. I’ve also taken the liberty of changing how the “Before”>“After” slider works. It is now a continuous drag by the user. I left the “multiple-click” reveal in the code (click & divider moves a little to the right). As an end user I found this tedious - but the click option is still there.
“1_havre_animation_av_ap” Demo here.
Projects here: 1_havre_animation_av_ap_JHSv1.hype.zip (1.1 MB)
and here: 1_havre_animation_glisser_test_JHSv1.hype.zip (3.0 MB)
==========================
Next: putting things together in the “glisser-test” version
I used a symbol in the “glisser-test” example. Why? Because a symbol can have its own timeline, so we can easily run the before~after compare slider timeline (“animationD”) which is inside the symbol - double click to open. More on Hype symbols here. (Note: “Pro” version only - I hope You have it!)
I selected all the elements in the “1_havre_animation_av_ap” Hype project then using “Symbol” menu > “New Symbol from Selection” converted them to a symbol named “Compare Slider”. I copied this “Compare Slider” symbol in the “1_havre_animation_av_ap” Hype project.
I then did a “Paste with Animations” of the “Compare Slider” symbol into the “1_havre_animation_glisser_test” Hype project over the “Groupe” folder & elements. Everything works but this is something of a kluge as I do not have time to finish the solution - but You should be able to take it from here. The main issue is the dragging of the entire group - the glisser action. When You drag on top of the symbol You only affect the “Compare slider” symbol, which is appropriate. Dragging outside of the symbol will glide to the other sections, so You will need to indicate this feature in some fashion. Also there are some duplicate elements in the “ch1_3” folder of those in the "Compare Slider"symbol.
Wow!
I owe you a thousand thanks.
I can’t wait to explore your clever work.
Very generous of your time.
PY
Envoyé de mon iPad