Share Posted January 29 (edited) 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 by Claire removed additional requests Link to comment Share on other sites More sharing options...
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
Already have an account? Sign in here.Sign In Now