Search the Community
Showing results for tags 'particles'.
Found 14 results
-
Hi all, on this demo, particles images load correctly but.. the interactivity seems totally gone: touchstart animation / mouseenter got strange issue (doesnt start at all) while adding gsap. Is something related how the script / canvas works? (Maybe because the canvas needs to see images as soon as possible (starting after img-loaded) , while using scrolltrigger to show and hide elements container cause a conflict?). I can avoid using scrolltrigger and show elem as is, but I was tryin' to make each of them, fadein staggered with GSAP. Thanks for any help
-
Hello everyone, I am new to using GSAP, so I need a little bit of help here because I am lost on where to start. I found this cool effect (https://rpj.bembi.dev/) that uses this package: react-particles-js. Can anyone instruct me on how to replicate this effect in React using GSAP please? Thank you!
-
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 ?
-
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?
-
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!
-
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
-
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/
-
Hello, I want to replicate some sort of an explosion animation. For this, I have an SVG with quite a few particles (presented with `<path>`) 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.
-
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!
-
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.
-
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 <div id="snow"></div> element): http://jacksonvillechristmas.com Any and all feedback would be most appreciated. Thanks!
-
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
-
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
-
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...
- 2 replies
-
- 4
-
-
- explode animation
- particles
- (and 1 more)
