Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest leelou

animate *MAGIC SPARKLES* along a path onClick (for multiple instances)

Go to solution Solved by Carl,

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 there, I just downloaded GSAP and I've been checking out codepen examples. I am a novice at JS so just a heads up I may need a small amount of hand-holding at first. ;)

 

Maybe someone can tell me if this is possible (also with GSAP will it work on IE9+?)-

 

I am making a simple hidden object game where there is a list of items and the user clicks on the objects in the list. When the item is clicked, it fadesOut and strikes out the object text on the list. I've got this working with jQuery.

 

HERE is where I am having trouble. I want users to be able to click on the object's name of text in the list and be given a hint. That hint would consist of magic sparkles moving a long a path and circling the object and then fading away. I'll need a different path for each list item. Also, once striked out cicking the object's name for help should be disabled.

 

I am also trying some SVG plugins and haven't been successful for multiple paths on click yet. 

 

I am trying to figure out codepen for first time....so I'll try and have what I have so far available soon. 

 

Thanks to anyone willing to help a newb out! :)

 

OK! Here is the codepen link: 

See the Pen IfixC by leelou (@leelou) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

This codepen from the GreenSock collection shows how to create random bezier paths for a group of elements:

 

See the Pen Kajpu?editors=001 by GreenSock (@GreenSock) on CodePen

 

As you can see is fairly simple, this code is the one that creates the random values for each element's bezier path:

var bezTween = new TweenMax(creature, 6, {
    bezier:{
      type:"soft", 
      values:[{setX:150, setY:300}, {setX:300, setY:-10}, {setX:500 + Math.random() *100, setY:320*Math.random() + 50}, {setX:650, setY:320*Math.random() + 50}, {setX:900, setY:-80}], 
      //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX","setY","setRotationDeg"]
    }, 
    ease:Linear.easeNone, autoCSS:false});

You could easily add the fade out to the sparkles without too much trouble to this. You could even create a timeline that animates the sparkles in a bezier path and add a short fade out effect that overlaps with the bezier animation using timeline's position parameter. To learn a little more on that check this blog entry:

 

http://greensock.com/position-parameter

 

Hopefully this could help you get started and let us know if you need more help.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Thanks for replying, Rodrigo!

I took a look at the examples you offered.  The largest difference is that I need SVG specific paths for each list item, not random.

I think I have an idea on how to figure out the sparkles fading in and out. 

Link to comment
Share on other sites

Ok, I am having trouble figuring out my bezier points. How do you know what points to plot to make your path??

Link to comment
Share on other sites

Hi,

 

Could you explain what particular path you want to animate?, is something you have drawn in paper or in some software?.

 

The more details you give us, it becomes easier to give you the best possible support.

  • Like 1
Link to comment
Share on other sites

I tried drawing it in AI but found no way to find the points necessary to enter into GSAP.  NVM. Found them.

 

I also tried http://www.victoriakirst.com/beziertool/ and http://matthewlein.com/ceaser/ but the numbers did not seem to match up (or there were too many of them) Is there an easier way to do this than trial and error?

 

Thanks

Edited by leelou
Link to comment
Share on other sites

How would I place a particle animation on a bezier curve and have it appear and follow the curve only onclick?

 

I found this codepen with an animated sprite of a butterfly: 

See the Pen DJIse by leelou (@leelou) on CodePen

 and this curve example: 

See the Pen tDLKI by anon (@anon) on CodePen

 

But how would I add something like this particle to that curve on click? (

See the Pen BpAim by leelou (@leelou) on CodePen

)

Link to comment
Share on other sites

This is what I have so far...but the particle does not apply to the path on click. What am I missing? Thanks

See the Pen jdKIz by leelou (@leelou) on CodePen

 

 

Oh my gosh! Oh my gosh! It is moving on the path! I found that I needed to have the bezier piece run first before the particle.

 

But it doesn't run on clicking of the button....It only runs on refreshing the pen. And ideas?

Edited by leelou
Link to comment
Share on other sites

Hi,

 

Right now I'm in the middle of something, in a couple of hours I'll be able to get a better look at this.

Link to comment
Share on other sites

Nice work leelou.

 

Your button is attempting to tween the timeScale() of bezierTween to 1, but the value already is 1 (by default)

 

try adding this one line above your button code

 

bezierTween.timeScale(0)
play.onclick = function(){
  TweenLite.to(bezierTween, 1, {timeScale:1});
  TweenLite.to(TextTween, 1, {timeScale:1});
};
Link to comment
Share on other sites

Looks really cool leelou ... I also noticed that your button variable is named playBtn but the variable used for your onclick event is just called play.

Link to comment
Share on other sites

Oh, YAY! Thank you!

 

The button is working on click now and I am hiding and then showing the sparkles before and after click. But, how do I make it fade away once it has completed animating along a path? I need it to be display: none (or completely removed from area).

I was looking in the docs and found onComplete but I must be implementing it wrong because I just keep breaking it.

 

Some that I tried (line 19 of JS in codepen):

onComplete:function(){$(".dot").remove();
onComplete:function(){$(".dot").hide();

This last one hides it but at the beginning...

bezierTween.timeScale(0)
play.onclick = function(){
  $(".dot").show();
  TweenLite.to(bezierTween, 1, {timeScale:1, onComplete:function(){$(".dot").hide();}});
};

See the Pen jdKIz by leelou (@leelou) on CodePen

Link to comment
Share on other sites

Also trying to get multiple paths working...

 

See the Pen KyoBe by leelou (@leelou) on CodePen

 

Once I make changes to this block of code (swapping out "dot" for "dot2") I lose the yellow sparkles on path one and if I swap out dot for dot 2 here then I only get red sparkles:

for (var i = dotQuantity - 1; i >= 0; i--) {
  dot = document.createElement("div");
  dot.className = "dot";
  TweenLite.set(dot, { xPercent:-50, yPercent:-50, force3D:true });
  document.body.appendChild(dot);
  dotPool[i] = dot;
}
Link to comment
Share on other sites

Hi,

 

Nice job, looks really great!!

 

The issue is that you have the same variables names after each emitter explosion function:

//at line 44
var explosion = new TimelineMax({ repeat: -1 }).call(shootDot, [emitter], null, 2 / dotQuantity);

//at line 128
var explosion = new TimelineMax({ repeat: -1 }).call(shootDot, [emitter2], null, 2 / dotQuantity);

Therefore when you call explosion on the first button (yellow sparkles) only the bezier tween happens and there's no particles coming out of the emitter and when you click the second button only red particles come out, also you're instantiating the shootDot function twice as well, so this might be the cause of that issue.

 

Finally you're creating the dotPool array twice, that means that the array gets populated during the first loop but later in your code it's emptied when you do this:

//at line 109
dotPool = []

My advice would be to create a single shootDot() function that accepts the emitter and dot class in order to simplify your code and create all your variables at the top of your code.

Link to comment
Share on other sites

I am having trouble simplifying the code. I just wanted to let you know I saw your comment. I am just hung up. Advice is always welcome! 

See the Pen KyoBe by leelou (@leelou) on CodePen

(i removed what I had done to try and simplify since it was broken.. :P)

 

How do you make the animation fade out after it completes the path (onComplete?)?

Link to comment
Share on other sites

I am using an Adobe Illustrator extension called "Drawscript" (http://drawscri.pt/) to get the bezier points but it is not aligning properly. It goes along the top AND bottom. Which it should just have one sparkle animated along the path and  come up from about 23px from bottom and then go up and wrap around the red square. It is showing the movement from the left of the canvas...

 

Is there a way to set a starting point? Maybe that would help. But then, why is it reflected at the top? 

 

Here is what I am getting for the path in AI with "Javascript Canvas" option. I'm plugging the "bezierCurveTo" numbers into the path coords but it is off.

lineStyle="rgb(0,0,0)";
lineWidth=3;
beginPath();
moveTo(722,23);
bezierCurveTo(722,23,507,-322,507,-396);
bezierCurveTo(507,-470,645,-498,645,-405);
bezierCurveTo(645,-296,569,-332,569,-332);
stroke();


Here is a pen: 

See the Pen FcgGC by leelou (@leelou) on CodePen



 

Link to comment
Share on other sites

Wow. Both the Drawscript to GSAP Bezier Converter and the SVG/Snap examples are awesome. thanks.

 

I am going to give the SVG/Snap a go

Link to comment
Share on other sites

Hi,

 

Also keep in mind that the Snap SVG feature is not completely necessary on production, you can simply use it in development to get the points for the bezier plugin and avoid loading the extra KB on the finished site/app.

 

In this codepen there's a simple example of how you can get the points for the bezier plugin in order to copy/paste them:

 

See the Pen 29ddf037aabd2d8fe9adb6f31b081660 by rhernando (@rhernando) on CodePen

 

Keep in mind though to remove the last coma of the text.

  • Like 1
Link to comment
Share on other sites

So I tried the Drawscript converter/GSAP bezier and if you scroll during the animation it moves the path around and doesn't circle my target. Is that going to happen with the SVG/Snap one too? Or is there a way to fix it? I need the path to always be accurate and go to target. It also starts at the top and loops to bottom and then goes to target. It should start at bottom. Here is my pen: 

See the Pen cuJKL by leelou (@leelou) on CodePen

 

Going to try Snap out and see if I get better results. Thanks for the tips!

Link to comment
Share on other sites

Ok, so I have made a fork pen of the SVG/Snap example and made my own path. And it was working fine but as soon as I tried to add the "emitter" dive with the sparkles it jumped off the path? and the sparkles aren't working. 

 

Here is the pen: 

See the Pen iGsrb?editors=011 by leelou (@leelou) on CodePen

 

Would you mind taking a look? Will the particle/emitter work on a path? I'd prefer it but maybe I should do a sprite *sigh*

Link to comment
Share on other sites

In your CSS you have lies the cause of the issue:

#emitter {
  background-color: green;
  width: 30px;
  height: 30px; 
  border-radius: 50%;
  position: absolute;
  top: 0;
  left:180px; /**because the bezier path is off somehow...**/
}

The left property has a value of 180, once you remove it it works.

Link to comment
Share on other sites

herpaderp!  thanks I was looking in the wrong place.

That was an adjustment from the previous test(Drawscript converter/GSAP bezier) that I forked for this one. 

Link to comment
Share on other sites

Ok, using the SVG/Snap example I have successfully fixed the sparkles to travel upon the path on click but I have not been able to get multiple paths going.

 

Would you please show me how to simplify this so I can have multiple buttons where each one, on click, starts a dot with sparkles on a unique path?

I am having trouble making the variables work, especially with the array (I am still learning JS).

 

Here is the pen with the single path working: 

See the Pen kEseb?editors=011 by leelou (@leelou) on CodePen

 

I will continue to try on a fork of the pen.

Thanks for your help.

Link to comment
Share on other sites

Hi Leelou,

 

You should feel good about accomplishing quite a bit with this task.

I have to commend Rodrigo for offering so much help.

 

We really have to stay focused on the GSAP API so that everyone gets the help they need. 

Making code more modular and re-usable can involve quite a time investment, especially for an example like this with so many moving parts.

 

When learning I would recommend taking much smaller bites. There is a lot of code in this example to get lost in. My approach would be something more along the lines of "I want to dynamically create 6 different buttons and when I press each a unique word is displayed"... something like that. Particle systems and bezier  tweens along SVG paths requires a lot of "code overhead" that can obscure the key concepts and code structures needed for something like this.

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