Make an Image visible on scroll

[Martin Burr]

Hello GSAP' Pro's,

i try to realize a simple animation- well at the moment i do not think it is that simple anymore after a week of research and trying...

Let me explain it, please.

I have two SVG's. One is a "clean window", the second is a "window cleaning tool". The animation is happening from top to bottom.

The "window cleaning tool" is moving with the scroll up and down (so far i did that) but at the same time the "clean window" should appear according to the window cleaning tools position.

I am not worrying at the moment about the background picture...

May someone point me in some direction or know where i can read something about it, please?

 

Thx a lot!

[Cassie]

Hi Martin,

 

This sounds like it would make a lot more sense in a minimal demo.

Could you put one together for us? Thanks so much!

[PointC]

Hi @Martin Burr 

 

Welcome to the forum.

 

Yeah, a minimal demo would be best as I'm not sure I understand what you're asking here. Your clean windows comment did remind me of this demo from a different thread a few years ago. Maybe it'll give you some ideas, but a demo would get you the best advice.

 

See the Pen rrgVvO by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

 

[Martin Burr]

Thank you all for your respond 😊

Here is what i have: 

https://github.com/martinburr/Animation

https://martinburr.github.io/Animation/

 

At the moment the clean window is just in the end fading in.

[Martin Burr]

maybe with a mask?

[PointC]

Yep, a mask or clip-path would work well. You'd stack the before and after pictures and then reveal the top one with your mask/clip animation. I'd say give it a shot and see how far you can get with the project and then we'll help when you get stuck with any GSAP related problems. A minimal demo would be great too.

 

Happy tweening.

 

[Martin Burr]

I think it is working the way we imagined.

May i ask for your professional opinion about the code, plz?

Thank you!

 

https://github.com/martinburr/Animation

https://martinburr.github.io/Animation/

 

[GreenSock]

Hi @Martin Burr. I'm glad you got it working the way you imagined! 🎉

 

Unfortunately we don't offer free professional code reviews, but we're happy to answer any GSAP-specific questions that you post in these forums. 

 

Good luck with the project!