Jump to content
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 :)

See the Pen maGRdZ by erayner (@erayner) on CodePen

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: 

See the Pen 3b59453e1a008ad59e63b676d0e164d1 by GreenSock (@GreenSock) on CodePen

 

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: 

See the Pen ee73db0022d49bdbdd31b796fb07a103 by GreenSock (@GreenSock) on CodePen

 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.