Jump to content
Search Community

Pin background image untill timeline is finished

Claire test
Moderator Tag

Recommended Posts

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 by Claire
removed additional requests
Link to comment
Share on other sites

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. 👍

  • Thanks 1
Link to comment
Share on other sites

  • Claire changed the title to Pin background image untill timeline is finished

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...