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! ?

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!?

Thank you very much @alig01 ☺️!! you have perfectly understood the point, as usual (and I was hoping you would answer me!!!?). Thank you so much for your invaluable help, as always! I tried to implement your suggestions and I have something to ask you: 1. Using once: true doesn't make the scrub work, it cancels its effect. So, this might be the solution I will adopt. But my question is simply: is there a way to keep the animation tied to the scrollbar but completing it on scroll up? (It would be perfect...) This question is mere curiosity, the solution might already be just the once:true. (The problem occurred because my client changed his mind about the animations and now he doesn't want them on scroll up). 2. Ok, I think I understand that the scale determines the dimensions that the markers "feel". This is why I see them both in the center of the paragraph if scale is set to 0. 3. I'll do some tests to verify the default start and end values. Thanks so much for the suggestion! I wanted to know if there is a way to dynamically calculate start and end values so the animation always starts correctly and is perfectly visible in all conditions. Anyway, I'll do some tests based on your suggestions. 4. Your implementation is great, I just can't use it as-is because I need "standalone" animations, which can be applied randomly to various HTML elements in the project (which is a CMS managed site, with pages that will be created by the user). For this I'm creating functions whereby I can, with a data-gsap attribute, give animation to different elements, without having to rely on "custom" timelines built for each section. Maybe I should try to use timelines in these functions, in the core of animation, but I can't quite understand the difference (and pros/cons) between a forEach and a timeline when working with arrays of elements to animate. As always, thank you from the bottom of my heart, you helped me understand and this is priceless. See you soon and hugs from Italy♥️!

Hello everyone, I'm trying to create a set of animations with GSAP (for example scale from 0, fade and scale from 0, etc.) and I wanted to make that by applying the name of the animation in a data-gsap attribute of an html element, this is applied on scroll. I can't, with any configuration to make each animated element be at its original position when scrolling up (onLeave, onEnterBack, onLeaveBack for say), so I would like the animation to happen only once when scrolling down, I hope that I explained clearly. What I did: I create a function called "fromScale" where: 1. I take the array of all elements that have data-gsap="fromScale" 2. I create a forEach in which I take all possible data-gsap-* attributes that may have been assigned to the element in the markup (e.g. data-gsap-start, data-gsap-end, data-gsap-ease) and in case have not been indicated, I assign them some default values. 3. I create a variable containing the gsap-from with the animation 4. I create a standalone ScrollTrigger which in the parameters resumes the gsap-from animation just created 5. I call the "fromScale" function (in my various attemps also with timeline...see the commented part in the CodePen) In the example here, I have a 100vh high gray section with a simple paragraph in the centre, then follows a background image with a box positioned with a translate -40% at its top, then I have another 100vh high gray section with another paragraph. Things I need to fix: 1. My main problem is that I am unable, neither with the timelines nor with other methods such as forEach to make the toggle Actions or the reverse or the onEnter, onLeave, onEnterBack, onLeaveBack methods work, with pin or without pin , it just doesn't work, the animations always start.? 2. I also can't figure out how to set start and end values that can fit, dynamically, for each element regardless of its position. I just can't get it (that's why I created the data-gsap attributes). Another huge problem when you want to create animations to be called in an entire project. I've been trying different approaches for days and this means that I probably haven't grasped well some basic concept about scrolltrigger,? or there's a problem in my logic (or syntax?) even if I watched the video lessons I have at my disposal and the docs and I don't understand (also because the more I search the more I realize that the same thing can be done in a thousand ways..so then I get lost...) I hope someone can help me. Thank you all in advance.♥️

Thank you very much for your help @alig01, which was very useful, and allowed us to work and above all to understand what we were doing wrong. Now it works exactly as expected and now we will do some more small implementations (we need the circle to move when user change slide dragging on slides or uses the next-prev arrow...)! We have been working on this for a long time without success, but thanks to you and your perfect example we can now move on !! Thank you for your commitment and above all for your patience. You don't know how helpful you've been to me and @MMJ. As soon as it's done I'll show you the finished example, thank you so much again and again!