Jules_A

Animate from the bottom up

Recommended Posts

Hi there,

 

I'm looking for a way to animate 'upwards' that is to say that I want the graph to start from the bottom and animate upwards.

 

I tried to set the transform origin to be at the bottom so that it might animate upwards, but that didnt work.

 

Any help greatly appreciated :)

Share this post


Link to post
Share on other sites

I have made it work with this:

 

 
 
<div class="graph1">
    <div class="inner"></div>
</div>
 
$(document).ready(function() {
 
TweenMax.to('.inner', 1, {height: "400px"})
 
});
 
.graph1{
height: 400px;
width: 40px;
margin: 0 auto;
transform-origin: 50% 100%;
 
position:relative;
}
 
.inner{
background-color: blue;
position:absolute;
bottom: 0;
width: 100%;
}

 

Unfortunately that's not the functionality I want. I need it to move the content above it upwards. Position absolute wont work here I think.

 

Any help is appreciated!

 

Share this post


Link to post
Share on other sites

There are a bunch of ways to do this, but here's one: 

 

Basically you set it up at the full height, and then simply animate the scaleY from 0 to 1 with the transform-origin being at the bottom. 

 

Does that help? 

 

Thanks for being a Club GreenSock member!

 

Share this post


Link to post
Share on other sites

Hey there!

 

Thanks for getting back to me so promptly. I implemented your solution, however I would like the image (of the cat) to essentially stay on top of the bar graph as it scales upwards..

 

So to explain a little more:

- The image of the cat should be 'fluid' where it isn't always right at the top, instead, the cat should sit on top of the bar graph.

- If the left side bar graph was at '72%' and the right side bar graph was at '30%' then the cats wouldn't be aligned, but they would both be sitting on top of the bar.

 

If you could provide a solution for that I would be forever in your debt :)

p.s. proud to be a Club Greensock Member.

 

Thanks!

Share this post


Link to post
Share on other sites

No problem. Again, there are tons of ways to do it, but here's one: 

 

I created a function that you just feed parameters to and it fires off the animation accordingly. Does that help? 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Ah, amazing! I was on the right track but this helps me a great deal.

 

Thanks a bunch! :)

  • Like 1

Share this post


Link to post
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.