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.
Note: I will be "back under water" for the next couple of days - so if You have questions it might be awhile before I respond - though others might!