Jump to content
Search Community

circle rotation

rakan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @rakan and welcome to GSAP! Please see the CodePen below that shows you how this can be done.

 

Note I'm rotating a parent of the circle because it makes it pretty easy to position the circle, size the parent and keep things consistent. There are other ways (using transform origin, for example), but I think this a simpler way to go.

 

See the Pen zeRgqy by sgorneau (@sgorneau) on CodePen

 

 

Hope this helps!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

In order to add to Shaun's great advice you could also use a bezier tween to achieve that:

 

See the Pen kjmDo?editors=0010 by rhernando (@rhernando) on CodePen

 

But be aware that the bezier solution is not responsive, since you would have to re-calculate every time a screen size change causes a position or dimension change in the element the circle is orbiting around. Shaun's solution is completely responsive though, so keep that in mind.

 

Happy Tweening!!

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Ok so I spotted a few things that really don't add up in your code.

 

To begin you have this:

 

var loader = $(".preloader"),
    tl = new TimelineMax(loader);

tl
  .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 })
  .to(loader, 0.5, {zIndex:"-10", opacity: 0})
t1.stop();

 

A timeline constructor accepts a configuration object and while a jQuery selector returns an object, is not really the type of object the constructor is expecting. Then you have chained the to() methods and then you add t1.stop(). First t1 is not defined so I'll assume that it refers to tl. This is exactly a good use for the config object I was talking before, if you want the timeline to stay put until a specific point in your code or perhaps an event, in this case most likely a page transition:

 

var loader = $(".preloader"),
    tl = new TimelineMax();

tl
  .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 })
  .to(loader, 0.5, {zIndex:"-10", opacity: 0});

 

Then you have some jQuery transitions there in the barba configuration. IMO if you're already using GSAP no need for that there.

 

Also you create a different timeline in this part of your code:

 

Barba.Pjax.getTransition = function() {
	$(".preloader").removeAttr("style");
	var loader = $(".preloader"),
	tl = new TimelineMax(loader);

	tl.to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 })
	.to(loader, 0.5, {zIndex:"-10", opacity: 0});	
  	return FadeTransition;
};

 

Again there are a few issues here, you're removing the style attr in the DOM node you're animating. If you want to remove all the styles applied by GSAP use clear props. Then you're creating a brand new timeline, identical to the one you already created, you should re-use that.

 

Finally if you want to stop the animation after the the fade out part of the code, that is the tween that sets the opacity to 0 you can use a .call() method to stop the animation:

 

var loader = $(".preloader"),
    tl = new TimelineMax(); // no need for configuration here

tl
  .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 })
  .to(loader, 0.5, {zIndex:"-10", opacity: 0})
  .call(function(){
    tl.stop();
  });

 

And when you want to start the timeline again just call tl.restart() and that should do it, like that there's no need for two different timelines here.

 

Happy Tweening!!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

I'm sorry but I don't think I'm completely following you. What type of scale animation you're looking for, a circle that animates from the edge? I'm not sure I understand what you mean. Could you please set a simple example of what you're trying to do, or explain in an explicit fashion which element you want to animate from what position to another?

  • Like 2
Link to comment
Share on other sites

I'm not sure if I understood correctly but does this comes close to what you want?

 

In the SVG code change the initial position of each circle by changing their cx and cy attributes:

 

<svg class="loader_dots" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"  xml:space="preserve">
  <circle cx="0" cy="0" r="0" fill="#000" stroke-width="1" class="load_animation_1"></circle>
  <circle cx="1000" cy="500" r="0" fill="#000" stroke-width="1" class="load_animation_2"></circle>
  <circle cx="500" cy="1000" r="0" fill="#000" stroke-width="1" class="load_animation_3"></circle>
</svg>

 

Then in your GSAP code:

tl
  .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 })
  .staggerTo('.load_dot', .5, {scale: 1, ease: Power0.easeNone}, 0.3)
  .to('.load_animation_1', .5, {
    fill:"#fff",	
    scale:1.5,
    attr: {
      cx: 500,
      cy: 500,
      r: 350
    }
  })
  .to('.load_animation_2', .5, {
    fill:"#fff",	
    scale:1.5,
    transformOrigin: '200px 200px',
    attr: {
      cx: 550,
      cy: 500,
      r: 200
    }
  }, "-=0.15")
  .to('.load_animation_3', .5, {
    fill:"#fff",	
    scale:1.5,
    attr: {
      cx: 500,
      cy: 400,
      r: 200
    }
  }, "-=0.15")
  .to(loader, 0.5, {zIndex:"-10", opacity: 0})
  .call(function(){
    tl.stop();
  });

 

That seems to do what you're looking for.

 

Happy Tweening!!

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...