samwatts1988

Thank you for all your help here! I feel like I’m getting my head around some of the intricacies involved in creating this kind of seamless/gapless sequence using GSAP, however I just had a couple of follow up queries on this. Our mask has been divided into separate pieces as per the @PointC article you kindly pointed me towards, however it doesn’t seem to be playing ball just yet and is still resulting in gaps in the sequence I’ve been working on (see updated CodePen below). https://codepen.io/samwatts1988/pen/jOdwRJa I’m just trying to get my head around where the gap in my understanding is on this. I understand that linear easing needs to be applied to certain parts of the reveal, but I just wanted to first check I’ve structured the SVG/masking correctly as I think this might be the part I’m actually struggling with, and to get a better grasp of what steps I might need to take in order to resolve if so. Really appreciate any further pointers on this and many thanks again for the help so far!

Hi there! I'm using DrawSVG for the first time and the basic setup all seems pretty straightforward, but I'm trying to reveal a continuous path which varies in width, so applying a stroke over the top of the path and revealing it isn't necessarily working as smoothly as hoped as it means that other parts of the path become revealed slightly sooner in the sequence than they should be (see CodePen for reference). Is it possible to reveal this kind of path smoothly in DrawSVG? If so, would it affect the way the SVG needs to be prepared prior to animating with GSAP/DrawSVG, or should it be possible to achieve a smooth, continuous reveal of that path through GSAP/DrawSVG alone? Many thanks in advance! Sam

Hi Rodrigo, Many thanks for your response - totally understand and appreciate your advice! I've been attempting to work the Flip plugin into my implementation and have managed to make some progress, however I think I might be doing something fundamentally wrong as when toggling the filters using checkboxes the elements don't currently reposition using an animation (code is implemented between lines 28-70). I've attempted to remove some additional code from the demo, however much of it is essential to the initialisation of the grid. https://codepen.io/samwatts1988/pen/oNJEBOJ I've positioned the elements using a combination of absolute positioning and translate values (so I assume it could also be something to do with this), whereas the demo you've provided is using flexbox - is it possible to use Flip with an implementation such as the one I'm using, or do you think it's advisable to amend this? Many thanks again for your help here. Best wishes, Sam

Hi there! I've been working on an infinitely scrolling image grid in GSAP for a while now and am looking to implement some filters so that, when clicked, images that aren't tagged with that specific category are removed from view and the items on the grid reposition themselves (with animated translate) to fill in the gaps which are empty following the execution of the filter action. I'm wondering what the best approach would be to achieve this effect and would appreciate any guidance/suggestions which will help to get me moving in the right direction. I've included a sample CodePen. Unfortunately there's still a reasonable amount of code here after simplifying as much as I could (I can only remove so much otherwise the demo doesn't function - many apologies for this), however the filter code is between lines 28-59. I also wondered if it might be possible to reuse the code to initially create the grid between lines 61-157, however I've as yet been unable to leverage this in any way. I'd be grateful for all hints/advice given - and many thanks in advance! Thanks, Sam

Hi Rodrigo, Thanks so much for your help here - this is really useful and I appreciate the notes you've provided above with regards to how best to go about tackling this. I've just been having a play around with the Observer plugin and I'm able to pick up the up/down/left/right events from the mousewheel by using this, but I think I'm getting confused when it comes to actually updating the Draggable instance. If I'm right it looks like you can capture the event information and read that on to the Draggable instance? (I'm assuming it would also include the use of the Inertia settings by default when it updates the instance?) I've created a new CodePen below and I've attempted to strip out some of the surplus code there for this example. On line 210 I'm now assigning the Draggable instance to a variable, and then lines 232-251 I'm attempting to update the Draggable instance. Should I be passing the event into the .update() method at this point? (I've tried both passing the event data and passing nothing but neither seemed to work successfully, and I've also tried passing this into .startDrag() and .enable(), but I'm pretty sure I'm just misunderstanding something somewhere along the lines in the docs!). https://codepen.io/samwatts1988/pen/yLGONBY Thanks so much again for your time and help here. Best wishes, Sam

Hello! I've been using the Draggable and Inertia plugins for the first time recently and they've been fantastic to work with. One thing I'm having a bit of trouble getting my head around though is whether or not there's a way that the Draggable behaviour can be triggered using the mousewheel, as well through the click and drag behaviour. I've read a few notes across various threads that seem to suggest using a proxy as the best way to achieving this, but I'm unsure as to whether that is definitively the correct approach for this behaviour - so I'd be really grateful if anybody is able to suggest whether this (or any other approach) is the best way for achieving this. I'm also hoping to implement a very gentle level of movement on the canvas when the mouse is idle which would then be continued by the mousewheel or click and drag behaviours. However, I'm assuming this would potentially impact the mousewheel/click and drag invoked Draggable behaviours as any movement when the mouse is idle would be affecting translate values? I've included a CodePen below just to outline the overall effect we're going for, which is an infinite grid (happy to slim the code down further if needed but for the moment I didn't want to remove too much in case it affects any potential approaches, given the various moving parts of what I'm hoping to achieve!). I'll be really grateful for any advice anyone is able to provide. Thank you! :)

Ah! Got it. I was trying to set .paused() on the timeline instead of the smoother. Thanks so much for the pointer!

Hi there! I'm currently working on a project which is using ScrollSmoother and ScrollTrigger, which involves the use of modals popping up over the top of the content. I just wondered what the most effective method of freezing/locking the scroll position is when a modal is opened over the top of the content? I've looked at .kill() and .paused() and these prevent the sequence from running but don't appear to "lock" the scroll. Similarly, I've looked at attaching a CSS class which puts overflow: hidden; on the HTML and body elements, however this doesn't succeed either (presumably because GSAP is still running transform: matrix3d(); on the scrollable element. Entirely possible I've misinterpreted something in the docs so apologies in advance if there's an obvious candidate I've overlooked, but any help/pointers here would be hugely appreciated. Many thanks! Sam

Thanks @Rodrigo - incredibly helpful and much appreciated!

Hello! I'm just getting my head into ScrollSmoother (looks awesome) and I'm attempting to incorporate this into a project I'm working on, which features two absolutely positioned full width and height sections which are layered over the top of one another using z-indexing. The idea is to transition one section upwards until it's no longer in the viewport and reveal the other section which is layered beneath it. I've got a bit of previous basic GSAP knowledge and have managed to get this part working, however when I introduce ScrollSmoother it appears to break the upwards animation which no longer seems to run. I believe I've set ScrollSmoother up as per the docs, so it'd be great to see if there's something I might have missed in the setup here or any pointers that might get me moving in the right direction again. All advice greatly appreciate, basically! I've included a minimal demo on CodePen. If you comment the ScrollSmoother in and out you'll be able to recreate the issue I've encountered. Many thanks in advance for any help provided here! Best, Sam

Hi @mikel! Thanks for your response - I think this might be part of what I'm looking for but looking back at my initial post I don't think I've been particularly clear on what my desired end result is, so my apologies for this! Essentially I’m looking to morph the thicker arch into the same weight as the narrower arch, with the base of the thinner arch then extending from the left and right to meet in the middle. The more I think about this now the more I realise it’s going to be the case that I need to rethink how I’m preparing the paths I guess?

Hello! I'm currently working on a project which requires shapes to transition between multiple states and MorphSVG seems to be covering the majority of things really nicely. There's a transition between two states that's tripping me up though where I need #start to morph into #end (see CodePen), with the latter shape being an outline as opposed to a solid shape. Currently when morphing between the two, #end transitions into a solid arch shape instead of the desired outline. I just wondered if anyone could advise on what I might be doing wrong here; might I need to contemplate a different approach or could it be that it's more related to the preparation of that particular SVG? Either way, all help will be hugely appreciated - thank you!

Thank you so much guys! findShapeIndex seems like a handy tool to be aware of for the future and the Motion Tricks article worked a treat. Much appreciated!

Hello! It’s my first time using GSAP and I’m really enjoying getting to grips with it but I’ve included a CodePen below which demonstrates an issue I’m currently having with MorphSVG. As you’ll see the animation between #stage-1 and #stage-2 works seamlessly, however when animating from #stage-1 to #stage-3 the morphing distorts quite heavily when animating between those shapes. What I’d like #stage-3 to do is morph the curves out of the curve/arch, if that makes sense. I believe I’ve followed the docs as detailed however I can’t work out whether I’ve made a classic newbie error or if there’s a more complex consideration at play here. Any pointers or help with this would be hugely appreciated! Thank you!