Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fencepencil

SVG Path Animation - Wave Dots

Recommended Posts

Super Newbie here, just trying to get the hang of GSAP (which is pretty awesome so far).

 

I wanted to know how these dots can animate until they morph into the letters, ie I don't want them to animate forever and I can't quite get the timing down so they stop once the dot becomes a letter.

 

The other thing is my code is rather large and I assume there is a way to shorten up everything. Maybe wrap functions around things ... 

 

Also the fill to white isn't working at the end.

 

Any help is much appreciated!

 

Shawn

See the Pen 32f0a06a3fe0245575c35020e9a32263 by fencepencil (@fencepencil) on CodePen

Link to comment
Share on other sites

Hi @fencepencil,

 

Welcome to the GreenSock Forum.

 

You can cut a lot, for example:

 

var dots = [].reverse.call($('.dot'))  // order of the dots - this code requires jquery or you the order in your svg

waveDots.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.4);

 

When the letter morphing starts, you can use e.g. an 'onStart' (more here) to stop the waveDots animation and set it to progress(0):

 

.to("#dot1", 0.25, {morphSVG:"#f", onStart: stop })

function stop(){
  waveDots.stop().progress(0);
}

 

I hope this is helpful.

 

Mikel

  • Like 5
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very cool animation.

Just a few little mistakes as to why the last fill:white wasn't working.

 

Change 

.to("#letters", 0.5, {fill:"#FFF"});

//TO

.to(".dot", 0.5, {attr:{fill:"white"}});

 

 

#letters is the group holding all the paths you are morphing to. You don't actually see the #letters group on screen, you see the #dots.

You can't change the fill of the #dots group because each .dot has its own fill set inline

 

image.png

 

So you need to target every element with a class of dot (".dot")

 

Lastly, fill is as attribute not a CSS property so you actually have to pass that value into the AttrPlugin (included in TweenMax)

 

.to(".dot", 0.5, {attr:{fill:"white"}});

 

 

Keep up the great work.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

as far as shortening your code, you can do a lot with loops if you set up your SVG the right way.

 

Here are the elements as they appear in illustrator

 

https://greensock.d.pr/vyLaop

 

Without giving any dots or letters their own unique classes or IDs you can just find the first dot and tell it to morph to the first letter like:

var allLetters = $("#letters path")
var tl = new TimelineMax({repeat:8, repeatDelay:0.3, yoyo:true});

//animate the first dot to the first letter
//animate the second dot to the second letter
//animate the third dot to the third letter
$("#dots").children().each(function(index, element){
  tl.to(element, 1, {morphSVG:allLetters[index]})
})

 

A setup like that could work for 100 dots and 100 letters with the same 3 lines of code.

 

See the Pen mpYjxN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thank you Mikel and Carl, it's definitely getting better with your suggestions. I'm still rather new to js as a whole so I don't know exactly what order to put things. 

 

I've implemented Mikel's suggestion, as well as the svg color change attribute and would like to add the loop Carl suggested, just not sure where to inject it and what to replace... but as you can see, the code is already much shorter thanks to the both of you. I really appreciate the assistance, guys :)

 

There is a small jump at the end of the animation, but I'm sure I can figure out how to smooth that out.

 

See the Pen a8dc175fe94b43e26082c24b50d0e6c5 by fencepencil (@fencepencil) on CodePen

 


var tl = new TimelineMax(),
	dots = [].reverse.call($('.dot')),
	waveDots = new TimelineMax();

tl
	.from("#post-left", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
	.from("#post-mid", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
	.from("#post-right", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
	.from("#mid-left", 0.2, {scale: 0.2, opacity:0})
	.from("#mid-mid", 0.2, {scale: 0.2, opacity:0})
	.from("#mid-right", 0.2, {scale: 0.2, opacity:0})
	.from("#tip-left", 0.2, {scale: 0.2, opacity:0})
	.from("#tip-mid", 0.2, {scale: 0.2, opacity:0})
	.from("#tip-right", 0.2, {scale: 0.2, opacity:0})
	.set("#side-post", {transformOrigin:'center'})
	.from("#side-post", 2, {rotation: 720, x: -300, y: -500, opacity:0}, "test")
	.from("#shadow-top, #shadow-bottom", 0.6, {opacity:0})
	.to("#dot1", 0.25, {morphSVG:"#f"})
	.to("#dot2", 0.25, {morphSVG:"#e1"})
	.to("#dot3", 0.25, {morphSVG:"#n1"})
	.to("#dot4", 0.25, {morphSVG:"#c1"})
	.to("#dot5", 0.25, {morphSVG:"#e2"})
	.to("#dot6", 0.25, {morphSVG:"#p"})
	.to("#dot7", 0.25, {morphSVG:"#e3"})
	.to("#dot8", 0.25, {morphSVG:"#n2"})
	.to("#dot9", 0.25, {morphSVG:"#c2"})
	.to("#dot10", 0.25, {morphSVG:"#i"})
	.to("#dot11", 0.25, {morphSVG:"#l"})
	.to(".dot", 1.5, {attr:{fill:"white"}});


waveDots
	.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.2)
	.to("#dot1", 0.25, {morphSVG:"#f", onStart: stop });

function stop(){
  waveDots.stop().progress(0);
}

//tl.seek("test");

 

  • Like 1
Link to comment
Share on other sites

Hi @fencepencil,

 

That's pretty good.

 

Line 35 is 'double'. The callback 'onStart: stop' is well placed in line 19. Then the wave stops at the first morph and the jump is eliminated.

 

Keep it up ...
Mikel

  • Like 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.
×