ugurcan

Hey everyone, I'm pretty new in GSAP. And any help will be very appreciated. So here is my code and I will describe my problem below; $('canvas.circle').each(function () { var $this = $(this); var wrapperHeight = $this.closest('.about-video').outerHeight(); var wrapperWidth = $this.closest('.about-video').outerWidth(); var container = $this.closest('.about-video').find('.content'); var canvas = $this[0]; var context = canvas.getContext('2d'); canvas.width = wrapperWidth; canvas.height = wrapperHeight; TweenMax.set(container, {position: 'relative', zIndex: 1}); TweenMax.set(canvas, {position: 'absolute', zIndex: 3}); var canvasProps = {currX: wrapperWidth * 0.5, currY: wrapperHeight * 0.5, currRadius: 0}; TweenLite.ticker.addEventListener('tick', render, false); TweenMax.to(canvasProps, 1, {currRadius: 260, ease: Expo.easeInOut}); function render() { context.clearRect(0, 0, wrapperWidth, wrapperHeight); context.beginPath(); context.rect(0, 0, wrapperWidth, wrapperHeight); context.closePath(); context.arc(canvasProps.currX, canvasProps.currY, canvasProps.currRadius, 0, Math.PI * 2, true); context.fillStyle = 'white'; context.fill(); } $('body').on('click', '.expand', function () { TweenMax.to(canvasProps, 1, { currRadius: wrapperWidth, ease: Expo.easeInOut }); }); $('body').on('click', '.collapse', function () { TweenMax.to(canvasProps, 1, { currRadius: 260, ease: Expo.easeInOut }); }); }); The thing is, everything works like a charm, except if I want to use multiple circles on one page. When I click on the "expand/collapse" button. All circles are being affected and I couldn't find a way to affect only the circle that is inside the same container with the "expand/collapse" button. I've even tried $('body').on('click', '.expand', function () { TweenMax.to($(this).closest('.about-video').find('canvas.circle'), 1, { currRadius: wrapperWidth, ease: Expo.easeInOut }); }); But I lose the smooth transition, which there is no animation at all. Only grow/shrink functionality. Thank you all in advance! Best, Ugurcan