Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,368 profile views

Learning's Achievements


Newbie (1/14)




Community Answers

  1. I do want to use absolute values in my timeline to control where it starts. But ah! Yes, I finally see the issue... There a tiny overlap in my fade out and fade in of the same element. Alas... That's the issue. =( Dumb mistake. My bad! Thanks for pointing it out~
  2. Here's what I meant, on first run, it looks fine, but on re-run, the image doesn't fade in.
  3. Hi guys, I'm not sure if anyone has encountered this before, I have the following timeline, this.tl = new TimelineLite() this.tl .set( '.line-1, .line-2, .line-3, .line-4, .line-5', { autoAlpha: 0 } ) .fromTo( '.line-1', 2, { autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 0 ) .to( '.line-1', 1, { autoAlpha: 0 }, 3 ) .fromTo( '.line-2', 2, { autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 4 ) .to( '.line-2', 1, { autoAlpha: 0 }, 5 ) .fromTo( '.line-3', 2, { autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 6 ) .to( '.line-3', 1, { autoAlpha: 0 }, 7.5 ) .fromTo( '.line-4', 2, { autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%', transformOrigin:'50% 0%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 14 ) .to( '.line-4', 1, { autoAlpha: 0 }, 17 ) .stop() So basically it's a simple scale up as opacity becomes 1 kind of animation. line-1 and line-4 are normal text, which works fine. line-2 and line-3 are images, which is the problem. When I use tl.play(0) to restart the timeline, the images don't fade in but appears only when it reaches scale 1. It doesn't fade in as before. The first round of playing the timeline works, but subsequent replays of the timeline, this issue appears. Any idea why? This timeline plays in front of an html5 video playing in the background, could that be the issue? Edit 1: Been testing and trying all sorts of ways to see what's the issue. It seems that the tween still runs... It's just that the inherit property now reflects as hidden? But nothing changed from the first playthrough to the replay. And the parent is definitely visible. Tried forcing it to be visible when the tween starts, it flips back to inherit still though once the tween plays. Edit 2: I guess it's not the inherit's issue... I tried using opacity instead of auto alpha. The tween still seems to be moving but it still only can be visible after the tween is complete. =(
  4. Hi guys, Thanks for the help! I need to add a +=0 to kick off _gsTransform I need to use [0] when using jQuery to get my object to find _gsTransform Everything is 0, 0 if I don't move it. Ha. I always thought the x, y is relative to either bounding element or screen... guess not. I'll have to check out getBoundingClientRect to see if I can use that then. Cos I'm arranging my squares using a div that wraps and align them, if I have to position each square manually so that I can use it's x and y, seems a little tricky.
  5. Hi guys, I have a set of squares arranged using css in my stage. And I have another set of objects which I would like to use gsap to move into these squares. My problem is, how do I get the current x and y of those squares so that I can assign my objects to move to their location? Searching the forum, I found that _gsTransform is supposed to store details about the objects, but my squares appear to have undefined _gsTransform. I'm checking using, console.log( $( '#square-one' )._gsTransform ) Is _gsTransform still being used? Or is it because my squares are not being transformed and thus doesn't have a _gsTransform. But I'm not going to touch my squares though. Is there another way to make use of it's x and y, so that my objects can move into them?
  6. I haven't got to the tails part yet though, still playing around with particle movements, trying different math equations and also the rotation stuff.
  7. Hi @OSUblake, Sorry, went on a week trip overseas, just got back! Hope you are feeling better~ I'm back to playing around with particles. Haha. Will try out the rotation in abit! Thanks again!
  8. Sorry another dumb question, I'm currently dotting out a sine curve from left to right using the following code, this.x += this.speed this.y = this.amp * Math.sin( this.x * this.cycles ) + this.center How do I add a rotation to this curve?
  9. 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.
  10. 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?
  11. 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...
  12. 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 }
  13. 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~
  14. 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... =(