Before / After photo effect

Hi,
I would like to create something like this with Hype 3 Pro:

http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/

I managed to manually create a iBook Author Widget which works quite well (despite the fact I get a white flash while the widget loads) … but I would like to include this type of effect within a Hype project.

Can someone give me some suggestions ?

Thanks

GL29

Just found this topic !

Here is an example I made a while back that has a drag reveal. Hope it helps!

Penguins.zip (504.7 KB)

1 Like

Thanks Stephen - nice and easy solution once you master Hype :wink:

I experienced some glitching with Stephens version, probably because the way you relatively decrease and increase group/image size and position. I would check out h_classen’s version instead GL29, even if it’s quite hard to understand the way it works and how it’s coded; the animation is seamless on my end.

Correct Markus … But I wish someone could help amending h_classen’s version so the picture is revealed half way from the start.
GL

Hi…

Nice Stephen! I’ve never seen it work like that before.

The only way I’ve been able to work this effect out in the past is the iframe in a “before/after” HTML frame I create and host separately as attached…

Hope that helps…

before_after.hype.zip (88.3 KB)
mar9.zip (525.3 KB)