Circle arrow animation

[venn]

Hi team,

 

I am trying to figure how do create this particular animation.

 

Here I attach an image with the steps from left to right in order.

 

The idea is that when you hover your mouse on the "circle arrow": 

1. The arrow will transition to the left and out of the view while getting clipped in the circle.
2. The circle will get filled.
3. A new arrow will comes from the right.

Any kind of pseudo code or idea on how I should start this will be most appreciated.

 

I believe SVG will the best option?

 

Cheers,

Venn.

[venn]

I managed to figure it out.

 

Here is my code that tries to solve this problem.

I use SVG and animate the SVG attributes.

arrowLeftTL = new TimelineMax({paused: true});

arrowLeft.on(Events.MouseOver, function(){
	arrowLeftTL
	.to(arrowLeftCircle, quick, {attr:{'fill-opacity': 1}}, "slide")
	.set(arrowLeftArrow, {attr: {fill: '#000000'}}, "slide")
	.to(arrowLeftArrow, quick, {x: "-=20"}, "slide")
	.set(arrowLeftArrow, {x: "+=40"}, "slide2")
	.to(arrowLeftArrow, quick, {x: "-=20"},  "slide2");

	arrowLeftTL.play(0);
})

arrowLeft.on(Events.MouseOut, function(){
	TweenMax.to(arrowLeftCircle, quick, {attr:{'fill-opacity': 0}})
	TweenMax.set(arrowLeftArrow, {attr: {fill: '#ffffff'}})
})

[venn]

Although sometimes there are weird things like the fill of an svg element is still the mouseOut state where I thought it has been reset back.

[Dipscom]

Hey venn!

 

Do you think you can whip up a little CodePen for us? That way we can tinker with it and offer suggestions.