ainsley_clark

Thank you so much for your help @PointC The loop and the rectangle really helped me out and saved me a lot of time, you can see it here: https://oaktuition.ainsleyclark.com/ I added data attributes to each path to determine if it was big, medium or small, so I knew where to position it in the timeline (it was time consuming but worth it as you said). Thank you so much!

Hey @PointC @ebinabo Thank you for your advice on this. A friend kindly chopped up all of the branches I needed for the tree. It works quite well with a <rect> being used as a clip-path however ideally it would be amazing for each branch to use its actual path as a clip path if that makes sense? I have just used the one branch to demo for the moment. I don't know if there is a less time consuming way of creating 50 or 60 rectangles to use as a path, each with there own transform-origin? Unfortunately I don't have the drawSVG plugin. https://codepen.io/ainsleyclark/pen/yLerMWQ?editors=1111 Many thanks for your help again.

Thank you @PointC and @ebinabo for your replies! I will give the mask/clip-path route ago. Im presuming I can set up each branch with its own mask in Illustrator somehow? Many thanks!

Any ideas? ? i don’t know how to approach this, or if I should cut the branches up in illustrator before animating them? Or better still if there is a way to manipulate the path do I can have it draw itself? thanks again.

Thanks for the reply @OSUblake I've had a good look at that Codepen, presumably I will need to split my branches up into individual paths? Or what's the best way of going about it? Thanks again.

Hi there, I'm trying to get a proof of concept down for a site that I am building. I have an SVG tree that is a path, I'm wondering if it's possible (or how I would go about it) so the tree would appear to grow out of the ground. So the main trunk would appear from the bottom and grow upwards, and then the smaller branches would branch out. I have worked with stroke offset and stroke dash array before so that a path looks like its drawing itself, but not with a solid path. I have also seen this fantastic animation from @Carl however, this generates the leaves and branches using js instead of using an existing path. Any help would be much appreciated, thank you for your time!

Ah gotcha @ZachSaucier Thank you for that. I was trying to figure out a way to have it so that it would still continue animating but not jump? Just like the next button as its very fluid, do you have any advice? Many thanks.

@ZachSaucier Best place to check to see if its still animating is onComplete right (going right)? if(!tweenAnim.isActive()) { offsetAmount = 0; gsap.set(container, {x: offsetAmount}); } Thanks.

@ZachSaucier you genius. Thanks a lot for this.

Hi @ZachSaucier Wondering if you could help me with a problem Im facing with the slider going in the other direction. For mobile a previous button would appear allowing the user to go right, but I'm having difficulty with it. I originally thought that I could prepend the container with the removed item, but I think it's a bit tricker than that because I need to transform the whole container so that last one is being removed. Anyway, any help would be greatly appreciated! https://codepen.io/ainsleyclark/pen/KKwjyEP?editors=1111

Hi @ZachSaucier @benoit Many thanks for your replies. When the mouse is hovered over the element (which could be anything), the cursor should enlarge, turn black & turn the text white. I can't seem to get the effect working with the blend mode (colours) but the effect is very close. Thanks again.

Hi there, I'm wondering if it's possible to have a cursor that follows the mouse, and when the user hovers over any element, the inside of the circle would turn black, and the text would turn white (or just invert the colours). Is there a way to make a mask? Im presuming it would be very un-performant to have an event listener on all elements. Codepen attached, thanks for your help in advance.

@ZachSaucier first of all, thank you so much. I was struggling with that all day! I originally removed the element from the DOM and used append child to add it to the end but I was constantly getting that jump. I would be really, greatful if you could answer these questions so I can wrap my head around what you did: How is it that cloning then appending doesn't create a jump? Ive never seen overwrite: true before, Ive read that: What's it doing in this tween? You've added a !tweenAnim.isActive() statement, which I presume is to set the container back to the starting position? How is it that you can click repeatedly and the tween still run smoothly? Again thank you so much.

Hi there, I'm struggling to put together a responsive slider for a site and wondering if you can help. When the button is clicked, the whole slider should move to the left and the first one should fade out, the first one is then appended to the end so theres an infinite loop. I have tried doing this using transform x and setting it to the index of the slide, however, when resizing the window, the newly transformed cards come out of sync. Please feel free to suggest something that I'm missing, or how you would approach this. Codepen attached, appreciate it in advance!

Amazing, thank you so much @ZachSaucier !