BenjaminO

Hello @GreenSock and thank you very much for your response. The problem can be seen in the video when I first refresh the site, the lines aren't appearing one by one. After digging about this, I think I found the reason of the issue and I wanted to share it. I declared in my code : window.onresize = function () { aboutblockParent.revert(); aboutblockChild.revert(); } I found out that the problem is caused by the address hiding or showing in mobile browsers, causing the height of the screen to change, hence triggering the onresize function. When I inspect the code in Safari IOS when I pull to refresh the site, the revert function is called instantly meaning (in my opinion) that it triggers the onresize event. I wrote a small workaround that works : let cacheWidth = window.innerWidth; window.onresize = function () { let newWidth = window.innerWidth; if(newWidth != cacheWidth) { aboutblockParent.revert(); aboutblockChild.revert(); } } Thank you again !

Hello folks ?, I noticed a strange behavior in Safari IOS 15. When I am pulling the page to refresh it, Splittext isn't refreshed and my animation isn't work. However, when I click on the refreshing button, it does work. I also tried in Firefox on IOS and the 'Pull to refresh' is working as expected. I record an example of this 'bug'. link to the website : https://www.benjaminoddou-photographe.com/about Am I the only one to have this bug in Safari ? Do you think it that it comes from Splittext itself ? Thank you in advance for your answers ? Sans titre.mp4

Hello ! ? Thank you for your responses ! I attached a little demo of my animation (see in the console the warnings ⚠️) ! Maybe there is something to improve to avoid this warning with a CSS trick (or maybe a gsap parameter/function to disable warnings just for this animation) ? My goal is to keep the stroke the same width and I want my svg to scale up or down depending on the dimensions of its parent. Thank you ?! https://codepen.io/benjamOD2/pen/qBpJvbP

Hello folks, ? I wanted to point out a small problem I have with DrawSVGPlugin and the property : vector-effect="non-scaling-stroke" This causes warnings ⚠️ in Safari, Chrome and Firefox. Paired with ScrollTrigger, DrawSVG creates a lot of warnings, it's a bit annoying ?. However I must say that the animation is working as expected ! Thank you in advance.

Hello guys, Thank you both for your ideas !! I finally got what I wanted and even if that's not the prettiest code, it's working quite well. I took your first submission as a base @mvaneijgen even though the flip plugin might be interesting as it requires less code. I let you my results updated here! Thank you all again ? https://codepen.io/benjamOD2/pen/ExoRXOz

Hello folks, ? I am trying to reproduce all the behaviors saw in FAQ section from (https://www.nikki-kay.com/about) with toggle animations. Unfortunately, I have quite a lot of small annoying weird behaviors that I didn't figure out. - When I trigger buttons, all my <p> are animating even when I try to target them specifically. (this should only happening when targeting the first button). - Reverse animation is not played smoothly (only when I click multiple times on the buttons). - Arrow animation not played sometimes (first click). Thank you all in advance !

Hello ! ? After some research I fixed the problems I had. for the proxy I moved the style setting into the OnPressInit function in order to always refresh size and position of the proxy before dragging. onPressInit() { ... gsap.set(proxy, {width: Image.offsetWidth, height: Image.offsetHeight, position: "absolute", pointerEvents: "none", top: Image.offsetTop, left: Image.offsetLeft, border: "1px solid red"}); }, I disabled zIndexBoost because it was affecting the proxy divs and not the images. Also I added this OnDragStart function to reinitiate zIndex of all images to 1 first, and then set the zIndex of actual dragged image to 2. onDragStart() { gsap.timeline() .set(".img-drag", {zIndex: 1}) .set(Image, {zIndex: 2}); }, 2022-04-09_18-18-59.mp4 Thank you again all for your help and support, I really appreciated it ! ? https://codepen.io/benjamOD2/pen/GRydOmN

Update : I have a weird bug for setting the proxy position and dimensions. It seems that it is reduce to a "point" in top left corner of the container. I set up the border to 10px for you to see the example. The problem is that container bounding is based on proxy position and not the "actual image" so I can't drag top or left ?. 2022-04-09_02-12-27.mp4

WoW thank you both for your responses, the results are super nice ? ! I changed a bit the code by adding skewY and introducing some resistance to throwing. I was wondering how to increment zIndex when the user start dragging the image. I know from the doc (https://greensock.com/docs/v3/Plugins/Draggable/static.create()) that there is a natural zIndexBoost when the element get pressed/touched (which is ok for me) but it doesn't seems to work in my example ?. I tried a workaround with this type of code without success: let zIndex = 1; this.drag = Draggable.create(proxy, { ... onDrag() { this.grab.style.zIndex = zIndex++; } } https://codepen.io/benjamOD2/pen/GRydOmN

I created the instance with the draggable plugin but I don't know which approach I should use to implement the skew effect on both axis x and y I tried without success : onDrag: InertiaPlugin => skewSetter(clamp(InertiaPlugin.getVelocity() / -50)), Also I didn't succeed to have the image lerp effect on drag. https://codepen.io/benjamOD2/pen/GRydOmN

+ I would like to create a "return in the drag area" effect when the user drag the image outside it's parent container or when the window is resized to avoid "loosing" my images (it happens after the image is dragged). 2022-04-08_10-43-14.mp4

Hello folks ?, I am using Draggability from desandro (https://draggabilly.desandro.com) in order to create 2 draggable images in a menu. I have set a lerp effect to them which I find super nice. It works well but I am looking to optimize my code and I think that draggable + inertia plugin can gave me a better results in term of performance. If you have some ideas or advises for building these draggable images using gsap plugins, it would be super nice ! (example of my code using Draggability is on the codepen link) Thank you all, Benjamin

Hello thank you both for your replies. After digging more, it seems that the lagging (and the warning ⚠️) was only affecting Safari (v 15.4 MacOS). I retried this morning and I had the same problem in the beginning but after few seconds, no lagging! I went back to VS Code and I had this message (see picture). Maybe the update from vite 2.8.6 to 2.9.0 played a role ? I still have the warning in Safari though but I think I can live with that.

Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!