Jump to content


How to: Basic Tweening on the page within a div?

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 am working with the tween.from(element,duration,etc). There are two tweening properties I would like to do:


First, I would like to make elements enter the page from the top or bottom of the viewport. I can make them enter from the left side or the right side. What is the property you pass to create vertical movement?



Second, I would like to move an element within a fixed dive. During the animation, I would also like the element to be diplay:hidden until it enters the element. the homepage banner is a perfect example of what I am looking to create.



Here is the simplified code I am running on my site now.

See the Pen gnImi by anon (@anon) on CodePen



Link to comment
Share on other sites



In order to create vertical animation you need to animate the top property. Negative values will make the element appear from above the screen, while with positive values the element will come from the bottom of the screen.


To make an element visible until it enters it's parent, is better to give the parent an overflow:hidden property, like that the element wont be visible while is outside the parent's bounding box.


Try this code:



  margin-left: auto;
  margin-right: auto;

  height: 400px;
  width: 1300px;
  border: 10px solid;

JS animates element from top

var load3 = function () {
  var logo = $("#me");
  TweenMax.from(logo, 1, {top:"-150%", delay:0.7});

JS Animates element from bottom

var load3 = function () {
  var logo = $("#me");
  TweenMax.from(logo, 1, {top:"150%", delay:0.7});

Keep in mind that for this type of animation, your element must have a position property defined (absolute, relative or fixed). Also is always a good idea that the parent element has a height defined, specially if you want to animate based on percentages. If a dimension is not set and you want to animate from 150%, the most logic question would be: "150% out of what?", if the element's height is 100px, then 150% would be 150px.



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