Jump to content
Search Community

Animating flowers popping out

lalaland test
Moderator Tag

Recommended Posts

Hello lalaland.

I'm a newbie too and I like your question so I will share my initial thoughts - although your requirement is pretty vague.

 

You can create objects on the screen by adding eg <img> tags  using a bit of javascript or even jQuery with:

  $(".enter").after("<img id='" + id + "' src='" + url + '">')

 

The big question is how to organise the location of the images and several approaches come to mind:

you could use mouse events to trigger the new images or generate random co-ordinates using the random function and clamp the position to restrict the values to be onscreen;

another possibility might be have a rectangular  array and fill in the images at random.

 

Some example code on mouse events can be found here

 

A GSAP timeline could be used to manage the bigger picture and eg) to animate and/or hide/remove elements after a period of time. 

 

    

Link to comment
Share on other sites

Hey lalaland. As Richard said, your request is extremely vague. Ultimately GSAP animates values, so yes it can be very helpful in creating your animation. But at the same time GSAP has no built in .makeFlowersPopOut() method or anything like that ;) 

 

So you should think: What sort of effect are you going for? Is it interactive? What will you build it with (pure CSS, images, Canvas, WebGL, SVG)? How do you want them to be laid out?

 

That's about as much as we can help with at this point. 

Link to comment
Share on other sites

Sorry for not explaining well. 

I am building a banner animation (school project). It starts with some letters moving, then one is falling down and the user can drag it back on. 

What I then would want to happen (onDragEnd) is the screen filling with flowers (SVG). 

I now achieved doing a kind of snowfall but with flowers but that is not exactly what I was going for 😕 

 

 

17 minutes ago, ZachSaucier said:

Hey lalaland. As Richard said, your request is extremely vague. Ultimately GSAP animates values, so yes it can be very helpful in creating your animation. But at the same time GSAP has no built in .makeFlowersPopOut() method or anything like that ;) 

 

So you should think: What sort of effect are you going for? Is it interactive? What will you build it with (pure CSS, images, Canvas, WebGL, SVG)? How do you want them to be laid out?

 

That's about as much as we can help with at this point. 

 

4 hours ago, Richard1604 said:

Hello lalaland.

I'm a newbie too and I like your question so I will share my initial thoughts - although your requirement is pretty vague.

 

You can create objects on the screen by adding eg <img> tags  using a bit of javascript or even jQuery with:

  $(".enter").after("<img id='" + id + "' src='" + url + '">')

 

The big question is how to organise the location of the images and several approaches come to mind:

you could use mouse events to trigger the new images or generate random co-ordinates using the random function and clamp the position to restrict the values to be onscreen;

another possibility might be have a rectangular  array and fill in the images at random.

 

Some example code on mouse events can be found here

 

A GSAP timeline could be used to manage the bigger picture and eg) to animate and/or hide/remove elements after a period of time. 

 

    

 

Link to comment
Share on other sites

Thanks for the added details, but what are you expecting us to help you with? We don't have the capacity to build it all for you, nor do we have a good idea of what you're going for. If you have a specific question, especially related to GSAP please feel free to ask and we'll do our best to answer. But until then good luck with your project :) 

Link to comment
Share on other sites

Just now, lalaland said:

not expecting you to build it for me,  I was looking for some advice on how to make it happen. but I'll figure it out.

thank you anyway ;) 

 

3 minutes ago, ZachSaucier said:

Thanks for the added details, but what are you expecting us to help you with? We don't have the capacity to build it all for you, nor do we have a good idea of what you're going for. If you have a specific question, especially related to GSAP please feel free to ask and we'll do our best to answer. But until then good luck with your project :) 

 

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