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

# Learning

Members

67

1. ## Logic for particle effect

My end goal is to be able to create something like this, but definitely, want to go step by step so I can learn bits by bit, cause this is surely a huge leap... Haha.
2. ## Logic for particle effect

Hi @OSUblake , Weird, not sure why, but when I re-try it again, the circle now completes with Math.PI... Heh... Want to try creating a 'tail' next. Do you have any suggestions on creating that? Should I duplicate the circles, reduce the size and follow behind, or should I try using lines to draw it?
3. ## Logic for particle effect

Ah! Dang, I must be blind. Didn't notice that I had both with sin. Thanks! Hmm... But when I use Math.PI * 2, the circle doesn't close properly and result in a chip off... Not sure why...
4. ## Logic for particle effect

Hi @OSUblake, I think I got a slight hang of how to generate particles in the canvas already, but trying out the movement physics you stated previously, all my particles are just moving diagonally in a straight line instead of in a sin-curve-like way. Did I miss out anything? I wanted to try to grab out from your canvas filter, but there was a lot more stuff in it so I'm not sure what is relevant and what is not. Here's what I'm using, const Particle = function () { this.x = random( w ) this.y = random( h ) this.radius = random( 1, 3 ) this.angle = random( Math.PI * 2 ) this.force = random( 2, 6 ) this.color = random( colors ) this.vx = Math.sin( this.angle ) * this.force this.vy = Math.sin( this.angle ) * this.force this.drag = random( 0.82, 0.97 ) this.wander = random( 0.5, 1 ) } Particle.prototype.draw = function () { context.beginPath() context.arc( this.x, this.y, this.radius, 0, 360, false ) context.fillStyle = this.color context.fill() this.move() } Particle.prototype.move = function () { this.x += this.vx this.y += this.vy this.vx *= this.drag this.vy *= this.drag this.angle += random( -0.5, 0.5 ) * this.wander this.vx += Math.sin( this.angle ) * 0.1 this.vy += Math.sin( this.angle ) * 0.1 }
5. ## Logic for particle effect

Hi @OSUblake , Oh my! You're indeed a Superhero! Yes, the explanation for the physics is exactly what I'm looking for. I want to learn the logic behind it rather than copy and paste. Yup, I have previously used gsap for some small particle effects and also asked some questions in this forum before, it all worked awesomely, but I do find it starts to get slightly laggy if I increase the count too much, but luckily for that particular project I don't need too many particles spawning so I was able to get away with it. I probably can get away with it this round too, but definitely want to look into a better way to do this. Going to read the articles and links! Thanks so much~
6. ## Logic for particle effect

Hi guys, I'm trying to achieve a particle effect like this, http://soulwire.github.io/sketch.js/examples/particles.html I understand that the example given uses a sketch.js engine to create, but I'm looking to create this using gsap and also using image files rather than shapes, so I'm trying to find out what is the 'physics' logic that causes the particle to wiggle left/right randomly as it fades away. Anyone has any idea? I probably can come up with the particle generator, etc, but the wiggling movement is the one I'm having trouble figuring out... =(
7. ## scrollTo plugin bug with iOS because of fixed positioned items

Hi guys, Actually, I have already solved this, but I would still like to post this in case anyone else faces the same issue. The issue, I have found that scrollTo window 0 jerks or stops on iOS devices. Works fine on desktops, Androids, etc. I searched the forums and found a few suggestions to solve this, - autoKill: false - autoRound: false - force3D: true I have added all 3 to my statement, but it didn't solve the problem. After much digging around, I found that it is because my scroll to top button is a fixed object which I have cornered to the bottom right of the screen, and somehow iOS conflicts scrolling to top with this fixed position div (I have no idea why). The way I opted to solve this is to set my button to autoAlpha 0 when it is clicked, and when it has finished scrolling to top, I fade the button back in again. Cheers! Hope it helps anyone who encounters this.
8. ## Improve my code?

Hi Jack! Thanks for the suggestions. Yes, I do think that wrapping the sub items into an object to reference seem a lot cleaner. Will definitely use that! I notice you're using a toggle state too, that feels a lot better! I've always been using an if/else statement and then changing the states inside them with a = 1 and = 0 and that does feel clunky. Will steal this to use everywhere! =D Thanks!!!
9. ## Improve my code?

Hi guys, I have a simple caption for photos that can be hidden by a click of a button. As my site has several of them, I decided to create a function to generate this effect across the different photos. Using an empty object to hold the various items in each photo and click events to manipulate them. But I felt it is a little scrappy using the object and am not sure if this is the best way to handle it. There is no bugs or problems per se. I'm just wondering if anyone could help me suggest a better way to handle this functionality, or could this code be improved/shorten or anything? Just trying to learn to code better. Thanks in advance guys! // empty object to hold photos and their relevant parts const eic = {}; function createExpandingButtons( pre, id ) { // store the various parts of the photo caption eic[ pre + 'Button' ] = id.find( '.button' ); eic[ pre + 'Arrow' ] = id.find( '.button span' ); eic[ pre + 'Caption' ] = id.find( '.caption' ); eic[ pre + 'State' ] = 1; eic[ pre + 'Button' ].on( 'click', { pre: pre }, function() { if ( eic[ pre + 'State' ] === 0 ) { eic[ pre + 'State' ] = 1; eic[ pre + 'Caption' ].css( 'position', 'relative' ); TweenLite.to( eic[ pre + 'Arrow' ], 0.5, { rotation: -90, ease: Power4.easeOut } ); } else { eic[ pre + 'State' ] = 0; eic[ pre + 'Caption' ].css( 'position', 'absolute' ); TweenLite.to( eic[ pre + 'Arrow' ], 0.5, { rotation: 90, ease: Power4.easeOut } ); } }); } // example of creating one such photo caption createExpandingButtons( '\$indexHero', \$( '#index-hero' ) );
10. ## zIndex issue from scaling

Hi Carl, Thanks for the reply. Yeaps, after deleting and resetting everything, I realised that if I wrap the div inside a container and deal with it, it works already! I guess in trying to solve it, I had written too many things and messed it even further, that's why it got really confusing in the end. Sorry for the trouble!

12. ## 200 particles, tween or canvas?

Hi Dipsom, Yea, I actually searched the threads for particle examples and built one with an example in the threads. I don't really see a lag in it, but just to be safe I wanted to know if it's the optimal way of doing particles. I will go check out OSUBlake's posts as suggested!
13. ## 200 particles, tween or canvas?

Hi guys, This is not really a script problem, but more of an advice needed. If I'm doing a 200 particle, particle effect, is it better to tween 200 individual items or to use canvas drawing? If I understand correctly, if you're using tweens, the browser will be managing individual 200 items every second to animate while if you use canvas, it will be managing one big item but still drawing 200 items in it every second. Is there a performance difference to this? Also, most particle effects I see are using shapes to generate, but if I need to use img files to generate out the particles, is it a bad idea?
14. ## Does xPercent affect background opacity?

Thanks for the detailed explanations and other useful information! Ah, I added it as a pseudo element because I Google and found this to be the way to make background images 'appear' with opacity. You can stack background color and background image on the same div? I'll try it later on. Didn't know it's possible, thought that it will override one of them.
15. ## Does xPercent affect background opacity?

Hello! =) Here's the codepen. http://codepen.io/kelvinzhao/pen/MJPKNW If you kill the tweens you will see that the opacity of the background works, but when it starts tweening, the opacity is gone.
16. ## Changing timeline settings on the fly

Hi guys, Sorry, one last question today! Is it possible to change the settings of tweens inside my timeline on the fly? Like changing its duration or easing? myTime = 10; myEase = Expo.easeInOut; myTimeline.to( \$slide1, 2, { xPercent: -100, delay: myTime, ease: myEase } ) .to( \$slide2, 2, { xPercent: -100, delay: myTime, ease: myEase } ) .to( \$slide3, 2, { xPercent: -100, delay: myTime, ease: myEase } ) myButton.click(function() { myTime = 2; myEase = Expo.easeOut; myTimeline.play(0); })
17. ## Repeating Timeline play from current to x label in 1 secs

Hi PointC, My bad, it was a wrong naming on my end. The script worked! Thank you so much~ =) But one quick note, from C to A, it actually reverses the timeline passing through B instead of going through the loop from C to A directly. Is there a way to overcome that?
18. ## Repeating Timeline play from current to x label in 1 secs

Hi @PointC, It is what I mean, but I tried using the script you suggested and the timeline just stops playing. Hmm...
19. ## Does xPercent affect background opacity?

Hi guys, I have a div with a background rgba of 0, 0, 0, 0.5 and an image under it, essentially making a background image that looks slightly darker. And I realised that when I use xPercent to move this div, the background rgba color disappears and my background image becomes fully opaque. So my question is, does xPercent affect the opacity of backgrounds? Or am I doing something wrong?
20. ## Repeating Timeline play from current to x label in 1 secs

Hi guys, A timeline question, if I have a repeating timeline that loops from label A to B to C (and of cos back to A), and I have a button to click to skip to any label. How do I have an action that will continue playing the timeline just that it accelerates and scrub till the desired label? So if we are currently at A, and you click C, it plays A to C in 1 second. Or if you are at B and you click A, it plays from B to C then back to A in 1 second?
21. ## Simple carousel

Ah... Dumb me. Thanks for the solution!
22. ## Simple carousel

Hi guys, I'm trying to do a simple carousel where slide 1 moves out and slide 2 moves in... But I'm not sure what is the issue causing slide 2 not to appear. When I check the details in browser, I notice that it did have a transform matrix, and when I uncheck the transform, it appears. When I hide slide 1, the transform works. Hmm... Here's the simplified test which get similar errors. http://codepen.io/kelvinzhao/pen/qRMKKY
23. ## background transparency only

OMG... This saved me. I almost wanted to rewrite the whole logic because I can't figure out why it's buggy and works randomly.
24. ## Passing variable into timeline via play?

@Carl So technically you can also chain t1.delay(1).play(4), etc? Nice!
25. ## Passing variable into timeline via play?

delayedCall seems to be the ideal way to do this! I've been trying to use a javascript timer to play, but I'm not sure if it's because of clearing timer or overlapping timer, there's a lot of problems. Argh. Thanks!
×