artyor

Thank you for explanation and solution!

Hi Rodrigo, thanks but unfortunately that didnt fix my problem, I dont think it's related . Here is new link with ctx.revert() and I also replaced ref with class selector to show that it's not working: https://stackblitz.com/edit/react-rywjch?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js

https://stackblitz.com/edit/react-gskvp7?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js Hello all, Here is React/GSAP/ScrollTrigger example made with GSAP starter template. In Button.jsx file, inside the gsap.context, I have scrollTrigger, where I animate .my-button__bg, but if I use class selector to target it inside my timeline, it will trigger animation for all 5 buttons, but if I use btnBg useRef(), it will work. so if u replace btnBg.current with '.my-button__bg' code will not work as intended, instead it will run animations for all 5 buttons. Why is that?

Thank you! I was confused why it's acting differently, thanks for clearing that up.

Hi Rodrigo, thanks for commenting. Yes that was intended, however, if you click on same image 1 while it's in animation of going back to initial parent (canceling the back animation), and animating it to full size again, onComplete of back animation won't trigger (Which is good, because if it did trigger, it wouldnt show image in full size). However if you click image 1 to go full size, then click on it again to go back to initial parent, and while animation of going back to initial parent is happening, you really fast click on image 2, and then full size will actually go to display none and hide image 2 in full size (Because onComplete animation triggered). Now, I know how to solve it, but my question is: Why does image 1 animation break/interrupt onComplete, but if we click on image 2, or any other image, it wont interrupt onComplete?

Hello all, It's sorry for title confusion, not sure how to explain. If you click on image in the grid, it will be animated to the right, and animation includes display block of grey wrapper on the right, when you click on it again, the image will go back to orginal place and also put display none to grey wrapper on the right (i added display none with onComplete prop). If you click on image 1, then click again to cancel ani and bring it back, and before it finishes you click it again to go on the right side (so basically clicking 3 times same image) animation will work. But if you click on image 1 once, and then you click again to bring it back, and while back animation is still goin on, you click on image 2, to show it on the right, it will start animation but it will disappear because display none will be added to wrapper duo to image 1 back animation. Why doesnt that also happen when clicking 3 times on same image?

Hi @Rodrigo, your codepen is what I wanted. Thank you. However I would like to learn why gsap.set xPercent to 0 didn't work? Shouldnt thata also reset x position, so next time I animate xPercent, I assumed it would work same as in your example. Tried to find solution in gsap docs, but couldnt find anything regarding this

Hello @Rodrigo, it's because I want items to have different xPercent when they get back to initial parent, and then back to xPercent: 0 when they go to the grid. I assume I could do this with toggleClass, but doing it this way will give me more flexibility later

@Rodrigo Thank you Rodrigo. This seems to work great

Hello all, So in this codepen example I use Flip.from to get items into grid slots, and then on another flip to get them back in old parent, but also to transform each item to value I set with gsap.set. This works too, but on 3rd click, when I want to animate items again into grid, the gsap.set doesnt set xPercent value back to 0. I also tried overwrite: true but it didnt work. Is there something Im missing? Thanks

Hi Jack @GreenSock, I didn't provide demo because it's your codepen I screen record, but here is forked version of it: What I notice just now that it only happens if your Editor view has code panels on the side. It doesnt happen if code panels are on top, which is weird. https://codepen.io/artyor/pen/dyqNpzw?editors=0010 Yes, I got it now! Thank you I tested code on Windows 10, Chrome and Firefox, as well as on MacOS Big Sur, on Chrome. The problem looks more visible when using mouse instead of touchpad

Hi Jack @GreenSock Thanks, I did screen record on your codepen where stuttering is also visible for me, in your commented example, while much less visible in initial example. Also for some reason, cards dont get aligned right (check video or play your codepen with commented example) at end of animation, and then jump to right place? Link to streamable video You were right to assume that I might want to not have all my cards lined initially, but wanted to simplify the demo. Basically initial start of cards wont be lined up, but I want to trigger their Flip animation with common trigger, not to have trigger for each card. I made new codepen, where I mixed your code with mine and made it work (but couldnt get your commented example to work) Basically I changed getState value, and changed scrub to true...But I kept '.images' as end trigger. It seems to be working without stuttering now...: I am not making 88 animations here, or am I? https://codepen.io/artyor/pen/ZEMBQdq?editors=0010 But .images is single element, container of other elements? So basically I wanted to use independent trigger, so animation gets triggered regardless of how are cards lined up. Why would this create 88 animations? Yes you are right, but I left it like this on purpose for codepen, so someone who checks my problem can retrigger animation and see stuttering easier. Hi Cassie @Cassie, thanks, performance might be a problem, but it's not because Im animating 9 elements, since this thing doesn't happen at all if I use different trigger instead of ScrollTrigger. If I use "click" event listener to trigger Flip animation, it doesnt happen. It must be something in ScrollTriger am doing wrong.

If top edge of grey divs that are animated are not in viewport when trigger happens, it's easy to miss it. If you make viewport more portrait like, (or just lower width container of codepen preview) it will be easy to see top edge of animated grey box jumping a bit. Also you can scroll up and down over trigger point since it tigers each time because of "onLeave". I added markers: true so trigger is visible simple: true didnt help. Thanks Edit: change css a bit so top edge of animated element is in viewport during the trigger

Hi all, Here is codepen with example of what Im trying to do. Basically I want to append elements into another grid, and trigger it with onScrubComplete (in codepen im using onLeave so you can re-trigger Flip.from to see the glitch(?)) Basically there is just this small stutter that's happening when Flip.from gets triggered, it is happening with or without absoulute: true prop. Im also using SmoothScroller, but it happens without it too. However its more appearent with SmoothScroller, as page scroll moves slower... Is there anything I can do to smooth this out? PS If you dont see it at first, trying scroll a bit faster over the trigger..Its there I promise, tested it on more browsers and devices Thanks in advance!

I'm wondering if I can use ShockinglyGreen in project I build for client and then sell the project to him? Can I use one ShockinglyGreen licencees for different projects and different clients? Or do I need business club for that?