Jump to content
Search Community

Creating a customise 'pop' animation

Guest
Moderator Tag

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

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

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

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...