en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en es sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en es en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pt en en en en en de en nl en ca en en en en en en en en en en en en en en en en en en en en en en en en en en en ru en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en sv en en en en en en en en en en en en en en en en en en en ms en en en en nl en en en en en hu en de en de en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
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
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:
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:
Hopefully this could help you get started and let us know if you need more help.
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.
Ok, I am having trouble figuring out my bezier points. How do you know what points to plot to make your path??
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.
Posted October 7, 2014 (edited)
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?
Edited October 7, 2014 by leelou
Share on other sites
Posted October 8, 2014
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
Share on other sites
Posted October 8, 2014 (edited)
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 October 8, 2014 by leelou
Share on other sites
Rodrigo    4,207 Likes (Superhero)
Posted October 8, 2014
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.
Share on other sites
Carl    10,907 Likes (Superhero)
Posted October 8, 2014
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
Share on other sites
Jonathan    5,380 Likes (Superhero)
Posted October 8, 2014
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.
Share on other sites
Posted October 8, 2014
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):
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
Share on other sites
Posted October 8, 2014
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; }
Share on other sites
Rodrigo    4,207 Likes (Superhero)
Posted October 8, 2014
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.
Share on other sites
Posted October 9, 2014
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.. )
How do you make the animation fade out after it completes the path (onComplete?)?
Share on other sites
Posted October 9, 2014
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
Share on other sites
Rodrigo    4,207 Likes (Superhero)
Posted October 9, 2014
You definitely have to check this post, I'm sure it'll make your life quite easier:
Just export the path in illustrator as an SVG file and Snap and GSAP will do the rest of the work for you.
Share on other sites
Posted October 10, 2014
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
Share on other sites
Rodrigo    4,207 Likes (Superhero)
Posted October 10, 2014
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.
Share on other sites
Posted October 10, 2014
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!
Share on other sites
Posted October 10, 2014
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*
Share on other sites
Rodrigo    4,207 Likes (Superhero)
Posted October 10, 2014
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.
Share on other sites
Posted October 10, 2014
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.
Share on other sites
Posted October 14, 2014
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.
Share on other sites
Carl    10,907 Likes (Superhero)
Posted October 15, 2014
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.
Share on other sites
Page 1 of 2
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
animate *MAGIC SPARKLES* along a path onClick (for multiple instances)
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“I think I love GreenSock as much as bacon.”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“Really quite impressed with @GreenSock JS - even the small things.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.