Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

15 Newbie

About Learning

  • Rank
    Advanced Member

Recent Profile Visitors

1,598 profile views
  1. @b1Mind Yea! That's definitely a good starting point, thank you! I'm thinking the waves and mesh of colours seem to be similar to perlin noise. I've seen some similar effects using threejs but I don't think it was used in this case. @ZachSaucier I'd love it if they did a writeup of the gradient effect. They have done a couple of writeups for their previous frontend development stuff and it was great reading and learning material. I've noticed that if you run the konami code on the homepage, you get to adjust the waves and colours. But I can't seem to figure out the grad
  2. Hi guys, This might be a little off topic, but I was wondering if it's possible to animate gradients like how the https://stripe.com/ stripe homepage banner does with gsap?
  3. Hey @ZachSaucier, Thanks for the demos! Looks great~
  4. Hi guys, I'm wondering how this effect is achieved? https://pitch.com/ What happens is that the hero image slowly zooms out as the user scrolls, revealing that is is a screen within a device, then the device with the hero image scrolls as per normal on the page. I'm thinking that it can probably be achieved with the new scroll trigger plugin, but it's anchored and zoomed, plus the ending when it scrolls normally felt a little confusing as to how it works. Not to mention getting the size right to frame the device just outside the screen based on screen size.
  5. 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~
  6. Here's what I meant, on first run, it looks fine, but on re-run, the image doesn't fade in.
  7. 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
  8. 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.
  9. 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 tr
  10. 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.
  11. 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!
  12. 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?
  13. 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.