Canvas Circle Animation

[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

[GreenSock]

This is kinda tough to troubleshoot blind. We'd be happy to answer any GSAP-specific questions here (this sounds unrelated to GSAP specifically). Or if you want a better shot at getting an answer, please provide a reduced test case in codepen and we'd be glad to take a peek.