eviljeff

Hi there, I am trying to have an infinite grid scroll based on the mouse position. So that when the mouse is close to the edges, the images in the grid repeat and the scroll is infinite. I have created a pen following the thread below but I'm now stuck. Would someone be able to help achieve the infinite loop functionality? Thanks

Hi guys, does a working example exist of the below created by @dude9? I am trying to create the same but I'm finding it really hard to make it work. Any help would be highly appreciated. Thanks! https://codepen.io/devil9/pen/qBdeyYx

Hey Jack, that does help and it works really well!! Once again, thank you so much!! I've learned a lot of gsap features from this project that I didn't know even existed. You are a life saver. Thank you

Hi, I have an image bigger than the viewport that I'd like to move around using the keyboard arrows. I am having issues with stopping the image once the edges are reached. I have tried with this function function limits(){ let drag = bigImage.getBoundingClientRect(); var mn = 0; var mxY = drag.height; var mxX = drag.width; var tY = drag.y; var tX = drag.x; if(-tY < mn || -tY > mxY) { gsap.set(bigImage, {y: -tY > mxY ? mxY : "+=0"}); }; if(-tX < mn || -tX > mxX) { gsap.set(bigImage, {x: -tX > mxX ? mxX : "+=0"}); }; }; But it doesn't do what I'm trying to achieve. I must be doing something wrong. I have created a codepen to show the problem. I would really appreciate to have some help with this. Thanks!

Hi Jack, I cannot thank you enough for your time and effort. Your version is so clean and tidy, it's just beautiful to look at. I didn't know you could get the draggable coordinates by just doing bigdraggable.x or bigdraggable.minX Dragging the small white rectangle is also a great plus, I'm seriously impressed. I've really learned a lot from your code, thank you a million times!

Hi, I'm trying to create a mini map of a large draggable image to show users where they are on the image. I've used part of the code from this topic The difference from it is that I'm using gsap3, so I have changed $draggable[0]._gsTransform; to posX = gsap.getProperty('.hub', "x"); posY = gsap.getProperty('.hub', "y"); On load, my image starts not perfectly centred and scaled at 0.9. Ideally the mini map marker should start at the same position but that is not the case, plus when dragging the marker should move accordingly following the position of the large background image. If I comment out the last line resizeHub(); the coordinates seem to be working correctly. Can someone please help me resolve this issue? I can't figure out how to fix my code. Thanks

Hi there, I have a full screen fully functioning draggable element and I now need to create a sort of a map/preview that shows where I am at with the drag. Something like the below image Is it possible to do that with draggable? If so, are there any examples of it by any chance? I can't figure out how to create that small preview box. Thanks!

That's great, I didn't know that!! Thank you I love GSAP so much

Hi, I am trying to figure out a similar doubt. Is it possible to know when a timeline label starts/ends? I have a vertical navigation that should react to the timeline labels (for example I have labels "0", "1") and they don't reflect the screen height (like full height panels) or anything similar. It's just a one page scrolling website with multiple sections. This is my ScrollTrigger function ScrollTrigger.create({ animation: tl, trigger: ".page__wrapper", start: "0", end: "+=400%", scrub: 1, pin: true, anticipatePin: 1 }) and the timeline is a mix of to/from animations const tl = gsap.timeline({paused: true, defaults:{duration: 1, ease:'expo.easeOut'}}); tl.addLabel("start") .to(page, {backgroundColor: '#F8C0C6', duration: .5}) .from(item0content, {yPercent: 120, duration: .5}, "<") .addLabel("0") .to(item0content, {yPercent: -120, duration: 1, delay: 1}) .to(item0, {scale: .95, delay: .5, duration: .5}) .to(item0, {yPercent: -100, duration: .5}) .to(page, {backgroundColor: 'rgb(210, 227, 203)', duration: .5}, "<") .set(item1, {scale: .95, duration: .5}, "<") .from(item1, {yPercent: 100, duration: .5}, "<") .to(item1, {scale: 1, duration: .5}) .from(item1content, {yPercent: 120, duration: .5, delay: 1}, "<") .addLabel("1"); I need the navigation dots to add/remove the active class when the labels enter/leave the timeline on scroll. So for example, on scroll, when the timeline gets to the label "0", the first navigation dot gets the active class and so on. Is that possible? Thanks

Hi @OSUblake Thank you so much. That is very helpful! All the best

Hi @dude9 Long shot here since it has been almost a year since this post, but did you manage to make it work in the end? I need to replicate the same animation, but without the images grid. I need to make the draggable full page element drag automatically depending on the mouse position. I hope you can point me into the right direction. Thanks

Hi Jack, thank you for your reply. From your experience, would implementing something like this https://codepen.io/biblos/pen/KRJmey or this https://codepen.io/mikeK/pen/RwGGmVv improve performance or would it still be a performance killer on that specific SVG? I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me. Thank you

Hi there, Is there a way to improve the performance on an SVG with hundreds of paths animating at the same time? If that's not possible, a solution to animate less paths would be good, but I've not found a solution to that yet unfortunately. For example to only animate the paths closer to the mouse cursor. Any help with this would be greatly appreciated. Thanks

Hi @FrankRuiz I've still not resolved this issue unfortunately. I've read that your issue was being due to a package. Could you please let me know what package that was? I'm using Frontity, which is a framework a bit like Gatsby so perhaps they use similar packages. Thanks you

Hi @Rodrigo Thanks for your reply! I have tried removing the styled components and used styles declarations using objects but unfortunately that didn't solved the issue. Do you have any idea what kind of package could be causing conflicts? I know this goes out of scope, but would you be so kind to let me know if there is a way to debug package conflicts? Thank you so much!!