Guest Posted December 9, 2019 Share Posted December 9, 2019 Hi there, I am trying to create a 'pop' animation. When the logo scales to it's fullest (11 clicks) it disappears and in it's place (from the center of the logo) comes lots of tiny logos that 'explode' outwards in random directions. The problem I am having mostly is to do with the randomness. As you can see by my pen, I have gotten it so that after 11 clicks the main logo which scales disappears and the other logos are appended to the container. Help is greatly appreciated! See the Pen zYxrmQM by erayner (@erayner) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 Hey erayner. To have a different value for each image, you should include your random generation as a function inside of the x and y properties: TweenMax.to('.baby-logo', 2, { x: () => Math.round(Math.random() * 99) + 1, y: () => Math.round(Math.random() * 99) + 1 }); I highly recommend checking out GSAP 3 and giving it a go! There are lots of improvements including a more streamlined API. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 10, 2019 Share Posted December 10, 2019 What's with the pron button? This targets the every element named baby-logo. TweenMax.to('.baby-logo', 2, { x: x, y: x }); So start by fixing your loop. function explode(){ for(let i = 0; i < 10; i++){ let explodeImgWidth = Math.round(Math.random() * 99) + 1; let x = Math.round(Math.random() * 99) + 1; let y = Math.round(Math.random() * 99) + 1; let img = $( "<img src='images/logo.png' style='width: "+ explodeImgWidth +"px;' class='baby-logo'>" ).appendTo(explodeContainer); TweenMax.to(img, 2, { x: x, y: x }); } TweenMax.to('#target', 0.2, { scale: 0, autoAlpha: 0 }); } 1 Link to comment Share on other sites More sharing options...
Guest Posted December 10, 2019 Share Posted December 10, 2019 20 hours ago, ZachSaucier said: Hey erayner. To have a different value for each image, you should include your random generation as a function inside of the x and y properties: TweenMax.to('.baby-logo', 2, { x: () => Math.round(Math.random() * 99) + 1, y: () => Math.round(Math.random() * 99) + 1 }); I highly recommend checking out GSAP 3 and giving it a go! There are lots of improvements including a more streamlined API. Wow I had no idea I could use functions like that ? Must look into GSAP 3. Thanks! Link to comment Share on other sites More sharing options...
Guest Posted December 10, 2019 Share Posted December 10, 2019 I have updated my pen above.. Here's another link to it. You can drag any image (not svg) into the pen and it will upload that image. My problem now is making the new logo start and not zoom in on the first click. Any ideas? Link to comment Share on other sites More sharing options...
Guest Posted December 10, 2019 Share Posted December 10, 2019 Thank you OSUBlake! Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 16 minutes ago, erayner said: Any ideas? Inside of the drop complete listener just reset your variables that need to be reset (similar to how you're doing it after the explode call). Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 3 hours ago, erayner said: Wow I had no idea I could use functions like that ? Must look into GSAP 3. Thanks! Function based values have been in gsap for a long time. I made this collection back in 2016. https://codepen.io/collection/nVjkaB You shouldn't include the animation for #target inside the loop. You're just creating the same animation 80 times, which is kind of wasteful. dots.to('#target', 0.5, {scale:0, autoAlpha:0}, 0); for (i = 0; i < qty; i++) { numX = Math.round(random(-10, 10)) * 100; numY = Math.round(random(-10, 10)) * 100; babyLogo = $("<img src='"+ homeLogo +"' class='baby-logo' />").appendTo(explodeContainer); dots.to(babyLogo, 1, {x:numX, y: numY, autoAlpha:0}, 0.2); } 2 Link to comment Share on other sites More sharing options...
Guest Posted December 16, 2019 Share Posted December 16, 2019 If you wanted to see - here's the completed live project http://www.makeitbigger.beansandrice.co.nz/ Thanks for your help guys! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now