Jump to content
Search Community

Can I/How to, do basic Tweenlite Animations in the opposite direction

jemfrim949 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

Hi,

 

Sure thing is just a CSS issue.

 

You need to set the bar element to an absolute position and set the right property to 0, also keep in mind that the bar parent should have a position set as well (relative or absolute).

 

This code should do it:

CSS

#demo {
  width: 692px;
  height: 70px;
  background-color: #333;
  padding: 8px;
  position:relative;
}
#bar{
  background-color:#91e500; 
  color:black; 
  position:absolute; 
  width:60px; 
  height:10px;
  right:0;
}
#logo {
  position: relative;
  margin-top:10px;
  width: 60px;
  height: 60px;
  background: url(http://s.cdpn.io/16327/logo_black.jpg)no-repeat;
}

JS

window.onload = function() {
  var logo = document.getElementById("logo"),
      bar = document.getElementById("bar");
  TweenLite.to(bar, 2, {width:"708px"});
  TweenLite.to(logo, 2, {left:"632px", delay:1});
}

Rodrigo.

Link to comment
Share on other sites

Another option is animate the full bar from the right of the parent and give the parent an overflow:hidden property:

 

CSS

#demo {
  width: 692px;
  height: 70px;
  background-color: #333;
  padding: 8px;
  overflow:hidden;
  position:relative;
}
#bar{
  	background-color:#91e500; 
  color:black; 
  position:relative; 
  width:708px; 
  height:10px;
  ;
	}
#logo {
  	position: relative;
  width: 60px;
  	height: 60px;
  background: url(http://s.cdpn.io/16327/logo_black.jpg)no-repeat;
}

JS

window.onload = function() {
  var logo = document.getElementById("logo"),
      bar = document.getElementById("bar");
  TweenLite.from(bar, 2, {left:"708px"});
  TweenLite.to(logo, 2, {left:"632px", delay:1});
}

As you can see there are several ways of doing this and I'm pretty sure that more creative users would come up with other alternatives.

 

Rodrigo.

  • 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.
×
×
  • Create New...