Pin background image untill timeline is finished

[Claire]

Hello everyone!

 

I'm dealing with this animation:

 

When the background image is in the middle of the viewport, an animation should start on its black gradient overlay that leaves only the center of the photo visible with a spotlight (in Italy we call it bull's-eye light) effect (the one used in theaters on actors) and an svg appears (always on scroll) with a scale effect. Also the animation should be pinned untill it's finished. But when I pin it, the overlay square moves down and scroll on its own.

 

In the JS code of the Codepen I wrote the functions maskRadialGradientReveal() which takes care of the timeline (scale the backround image, then apply the overlay and then scale the logo svg

 

I'm not ble to pin the section untill the animation is finished in the maskRadialGradientReveal function.

 

Thank you in advance as always and any suggestions are welcome!😊

See the Pen wvxxaeQ?editors=0010 by chiaralyn (@chiaralyn) on CodePen

Edited February 4, 2023 by Claire
removed additional requests

[GSAP Helper]

Hey @Claire. I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums....

 

Keep it simple. Don't list a bunch of requirements ("it should start in the middle, then fan out, then have a spotlight, then an SVG appears, then it scales, pinned until finished..." - that's way too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, only post a question focused on that one thing, like "how do I trigger the pinning when the SVG is in the center of the viewport?" Keep your CodePen focused only on that one piece. Then once that's answered, move on to your next question. 

 

Baby steps

 

Again, don't list out all your problems (the list of requirements that you're having trouble with). You'll get a lot more people willing to help you if you show a willingness to keep things simple and clear for them. 

 

And definitely keep your questions focused on GSAP-specific things (like the API) rather than general logic stuff (if possible). 

 

Good luck with your project. 👍

[Claire]

Thank you very much! It's a very precious advice! I'll try to it more simple proceeding step by step tomorrow and reformulating the question.

Thank you again! 🤩