Jump to content
Search Community

Animate from the bottom up

Jules_A test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

 
Link to comment
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!

 

Link to comment
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!

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