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 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 en en en en en en en en en en en en fi en en en en en en en en en en en en en en de en en en en en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en tr en en en en en en en en en nl en en es fr en en en en en en en fr en en en en en en en en nb en en en en en en en en en en en en en en en en en en nb en en en en nb en en en en en en en nb en en en en en en en en en en ru en en en en en fr en nb en fr en en ru en en en en en en en en en nb en en en si eu en en en en en en it en en en en en en ms nb en en ms en en en en en en en de en en en en en en en en nb en en en en nl en en en en en en en en en en en en en eu nb en en eu en en en en en en de en en nb en en en en en en en en en en en en fr en pl en de en en en en 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
Recreate an effect using GSAP
AlexCali posted a topic in GSAP
Particles, nested timeline, repeat problem
SteinarvDesign posted a topic in GSAP
I have 2 functions: generateParticles and animateParticles ( w. an inner timeline ). I also have a 'Main Timeline': gsap.timeline( { repeat: -1 } ).call( animateParticles, [numParticles - 1], '-=0' ); The problem is that 'animateParticles' executes only ONE time - the function will NOT repeat. How can I make the function 'animateParticles' repeat itself after the first execution - play multiple times ?
ginphreak posted a topic in GSAP
Hi to all, i want create an animation based on this script But I would like to add a function that dynamically changes the number of sides of the geometric shape along which the particles rotate (morph?). It's possible? Can you help me?
Help rotating particles on mouse
aareaux posted a topic in GSAP
I am currently trying to get an animation to rotate some particles based on the mouse cursor like the 'Default Demo' here. If you look at the codepen I linked, I can get the basic spinning working, but I need for the animation to follow the mouse and have min/max rotations link the demo. Is this possible? I don't need the circle to shrink/expand, I just need it to rotate based on the mouse cursor. Thanks in advance!
cfx posted a topic in GSAP
Guys, I've used greenock before on website deployments but I'm no expert, we're going to be using it much more now and the first project we've come up with is (as usual) tricky. Is it possible within GSAP to replicate something like this? Seems ambitious but I'm sure GSAP can handle it Interested in any other threads that discuss these principles. Needless to say I'm trying to avoid defaulting to After Effects.. Buzz
Creating particles using Webgl & Greensock
Buntafujiwaaa posted a topic in GSAP
Hi, Recently, I'm trying to explore slightly more advanced animations. I'm scoured the web, forums for any examples, but it seems I'm stuck. Wondering if anyone can point me in some directions. I'm trying to achieve an similar effect like this -> https://looi.co/ But, probably not as complicated as this site. I believed there's certain level of 'voodoo' in this lol. The example above is using Three.js, nt sure if greensock is being used. I'm looking to do some interactions, and gravity in my visualisations. See, my attached design -> So the letter in the center will be like a container where the particles will not move in or interact. And when I move my mouse on the screen there will be a like a repelling effect on the particles, like the website above. So in my head right now, my train of thought is like 1) Generate the particles moving inside the viewport (bouncing when reach the end or something) 2) Then animate the particles to move using Math.random or sin or cos (Not sure about this, I researched on sin and cos to make your motions looks more natural yet random, but haven't found an article to clearly explain how it works, what kind of maths formula should i be using?) 3) When the particles reached the letter, it bounces off (I assume you have to push it away with a if/else statement? So do I implement a collision library or something ? ) I'm still looking into p5.js (which is based on processing) and pixi.js (which is frequently recommend in this forum). But I'm unsure if pixi.js is to be compare similarly to p5.js. I guess I will definitely need to use webgl since there're tons of particles involved. The pixi examples website seems to be extremely basic. Are there websites that explores more complicated stuffs like http://openprocessing.org/
Multiple particles animation from center
mishunov posted a topic in GSAP
Hello, I want to replicate some sort of an explosion animation. For this, I have an SVG with quite a few particles (presented with ` `) being spread out across the whole canvas. This represents the end state of the animation (explosion). In the beginning of my animation I want to animate all the particles' `x` and `y` from the center of SVG so that the particles gradually get to their end positions from the epicenter of the explosion. Now the question is how to achieve this in an efficient way preferably without looping through all paths and calculating their offsets in relation to the parent SVG? Thank you.
dada78 posted a topic in GSAP
Hi guys! I have been browsing through your banner inspirations: http://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?hl=html5%20banner and found this really nice particle animation created by user Oliver15Years: http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ I am refactoring it to create a steam animation but can't figure out how to kill the particle engine ("spawnSteam") in my timeline. I would like to ensure that the generator is being killed in my playEnd function. I tried adding spawnSteam.kill(); // but it didn't work.. Thanks so much everyone!
gandoulfe posted a topic in GSAP
Hi, First, sorry for my english, I am french. I made some particles, and I want to erase them with an eraser. There is no draggable element, the eraser moves by himself automatically (with a bezier path). I want the particles under the eraser to disappear. I am trying to use the HitTest() function but i cannot figure out to use it without a draggable element. Thanks for your help. David.
Feedback requested on site animation
CFMDeveloper posted a topic in GSAP
Hey everyone, I recently put together a nifty little site for a local event in town and (of course) I utilized Greensock in my project. I took a demo that I had found and tweaked it so I could create the snowfall effect seen in the hero/background. However, I've noticed that it seems like its slow (performance wise) on certain devices and its gotten me thinking that maybe I can optimized the performance to insure a steady 60fps framerate (as consistently as possible). The codepen URL I provided shows the original fork example I created. http://codepen.io/iansvo/pen/NNVPPj Here is the live website where this code was implemented (sans the transform: scale() on the    element): http://jacksonvillechristmas.com Any and all feedback would be most appreciated. Thanks!
xtn posted a topic in GSAP
Hi everyone, just started with GSAP and it looks great! I'm posting here to ask for help. I'm currently aiming for this animation: (space particles) https://youtu.be/4QOuixmYmhU I'm stuck on being able to like, infinitely spawn particles/stars after the old ones go behind the page or reach their maximum Z position, and garbage collect them. Also, I'm having blur issues when Z position is at a high value. Is this a browser issue? If yes, what are the alternatives? Would scale be okay? I tried scaling but unable to achieve the effect on the video I posted. Guys, your help is very appreciated! Thank you
Infinite items on a bezier curve
daversa posted a topic in GSAP
Hi All, I've been banging my head against this for a while, I've been trying to use particle emitters, and about everything else I can think of but I need some help with this. Basically, I want to replicate the attached pen but have an infinite amount of creatures spawned along the bezier curve with no breaks. I'm able to repeat the animation obviously but there's always a break in the chain as it repeats. Any help would be greatly appreciated! Thanks, -Dave
One way to explode items (example included)
Michael71 posted a topic in GSAP
This is an example that I tailored that uses GSAP to imitate exploding objects. It uses multiple canvases on one element but without the need to re-draw them. I understand this might not be the best solution for large objects but it works nicely with small objects and it is easy to integrate. Please feel free to post your own solutions because honestly I think there is somewhat lack of content in the wild about canvas/DOM explosions... example here: http://cdpn.io/FpiJw (codepen) PS: Feel free to fork and change the explode code (please share here if you do). PS1: Make sure you use the SlowMo easing...
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“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”
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.