Learning

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?

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.

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!

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?

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.

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?

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...

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 }

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~

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... =(

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.

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!!!

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' ) );

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!

EDIT: Oops guys, after the z-index issue first occurred, I have been moving things around and causing this issue to deepen, after deleting everything and starting over, I realised it works already as long as I don't scale from the top element but the inner child! =x Perhaps the admin can help me close/delete this thread? Sorry for the trouble guys! Hi guys, I've searched the forum and found 1-2 similar topics, but I don't really understand the solutions... So I thought maybe I'll try to ask this question again. Really sorry about this! So I have a dropdown menu that has a z-index of 10 (so it's above everything) and visibility of hidden. When I click on a hamburger icon, I used TweenLite to scale it up from 0 to 1 and set the autoAlpha to 1. This caused the z-index to reset to 0 and thus the dropdown menu appears behind other elements on my page. I have tried including zIndex into my tween, but even if the element.style shows it's z-index 10, the computed z-index stays at 0. I have also tried using clearProps mentioned in one of the previous threads, but it didn't seem to affect anything too. =( I understand from the other thread that scaling (transform matrix) will automatically reset the z-index (which is what is causing this issue I'm guessing), but doesn't tweening the zIndex help? Do I have to put my menu at the bottom of my body of every page to make this work? Thanks in advance again guys!

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!

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?

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.

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.

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); })

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?

Hi @PointC, It is what I mean, but I tried using the script you suggested and the timeline just stops playing. Hmm...

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?

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?

Ah... Dumb me. Thanks for the solution!