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 !

Hi there, Racking my brains on how to accomplish this with GSAP 3, here's what I have: const killTimeline = (timeline) => { const targets = timeline.getChildren(); targets.forEach(target => { console.log(target._targets) timeline.set(target._targets, {clearProps: "all"}); }); timeline.kill(); }; Trying to clear all properties of a given timeline when user resizes to below tablet width and kill the timeline. Is this best practice? I'm always struggling with responsive destroying & enabling timelines for different viewports. Many thanks in advance.

@PointC Thank you very much for your answer. This is what I'm looking for. Is there a way to clear props for everything within the DOM? I have a vast timeline and it would be quite a long list. Thanks again.

Hi all, I know this has been covered to somewhat within the forums but no answer is giving me a solution to my problem. Im using ScrollMagic and TimelineMax (a lot of timelines) to animate boxes when the user scrolls down the page. My intention is to disable parallax scrolling (the timelines & the scrollmagic controller) when the user resizes below 992 pixels. Upon visiting here: https://github.com/janpaepke/ScrollMagic/issues/15 I was successfully able to disable the parallax, but all my Timelines mostly use .from and upon resize, they preserve the the .from position. What is 'convention' to destroy the timelines and set back to regular position (not .from position) when resizing? I always seem to struggle with this in GSAP! var controller = null; //set initial values for page width and item height var width = $(window).width() //767 is my mobile breakpoint if( width > 992) { initScrollMagic(); } $(window).resize(function(){ //reset values when page size changes //my scroll magic is used on multiple pages, duration depends on item heights width = $(window).width() if( width < 992 ) { //you can just use 'controller' here as it will return true or false, you dont need all the conditionals if (controller) { controller = controller.destroy(true); box2Tween.kill(); //This is where Im having problems box2Tween.invalidate(); //TweenMax.killAll(); } } else if ( width > 992 ) { //same here if ( !controller ) { initScrollMagic() } } }) function initScrollMagic(){ $('body').scrollTop( 0 ); controller = new ScrollMagic.Controller(); //Box 1 Animate Down let box2Tween = new TimelineMax({paused:true}); box2Tween .from(".box--number2", 1.5, {top: -75, ease:Power3.easeInOut}) .to(".box--number3 .box__shadow", 1.5, {scaleX: 0.8, ease:Power3.easeInOut}, "-=1.5") .to(".box--number2 .box__shadow", 1.5, {scaleY: 0, ease:Power3.easeInOut}, "-=1.5"); var scene1 = new ScrollMagic.Scene({ triggerElement: "#box2__animation", offset: -250, duration: $(window).height() }) .setTween(box2Tween.play()) // .addIndicators({name: "1 (duration: 0)"}) .addTo(controller); } Apologies for no codepen, I usually would but its quite complex. Many thanks in advance.

Hi all, I will be coding something in the near future that basically is a curved line down the page with a ball following it as its scrolled. The line is dashed and will also be filled in on scroll. In essence it will be similar to https://asaro.co.uk/. I wouldn't know where to start. Would anyone have any ideas about how to code this with GSAP? I'm not looking for full blown code, just maybe some pointers on how to achieve this. Many thanks in advance, Ainsley.

Thanks. A combination of above helped. ☺

Wow thank you for both of your replies. @Dipscom - surprisingly, even the class change it didn't work! @Mikel - you have actually solved one issue that I was having and I didn't even mention it! Legend. What happens if we change the background colour of the buttons though? How do we revert back to the original colour? Thanks again.

Hi Dipscom, Thanks so much once again. Still no luck Updated to: var navTL = new TimelineMax({paused: true, onReverseComplete:clear}); And if i wiggle back and forth the nav bar it reverts to the same colour. www.ainsleyclark.com/test/index.html

Hi Dipscom, Thanks for your reply again. Upon rolling over the link, the .circle(s) still dont go back to their original colour. I have updated the link I gave you with the code below. var navTL = new TimelineMax({paused: true, onComplete:clear}); $('.circle').hover(function() { TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut}); }, function(){ TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut}); }); function clear() { TweenMax.set('.circles', {clearProps:'backgroundColor'}); } Thanks again.

Hi Dipscom, Many thanks for your reply and the indication of using clearProps. I have tried setting the navTL to clear props on reverse like so: $('nav').hover(function() { navTL.play(); }, function(){ navTL.set(".circle", {clearProps:"backgroundColor"}); navTL.reverse(); }); This works reversing, but has some unexpected results going back in. You can see the animation here: http://www.ainsleyclark.com/test/index.html with the code I showed above. Thanks once again.

Hi all, Im creating a navigation bar that pops out from the right hand side, within it are dots (.circle) that's basically a vertical nav. When the user hovers over the navigation bar the dots expand and change their background colour. var navTL = new TimelineMax({paused: true}); navTL .to(".circle", navTime, {scale: 4.2, borderRadius: 3, backgroundColor: "#232021"}) $('nav').hover(function() { navTL.play(); }, function(){ navTL.reverse(); }); Once the user is in the navigation bar, The dots (.circle) background colour should change again upon hover. $('.circle').hover(function() { TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut}); }, function(){ TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut}); }); It changes, which is fine but when the user closes the navigation bar, the dots always go back to the darker-colour (#232021) instead of their original colour when loaded in the DOM (#958f8f). Many thanks in advance, Ainsley.