Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

position starts from beginning of timeline

Recommended Posts



I'm very new to greensock, but just getting my head around it. I have created my first simple animation using TimelineLite. Everything is working although I can't seem to make animations overlap properly. 


I am using a position value but it doesn't seem to work with "-=X" or "+=X" I have to enter "+X" or "-X" for it to do anything. And then when it does work I have to calculate from the beginning of the timeline as it doesn't work using the previous animation. 


window.onload = function() {
var tl = new TimelineLite();
var bgMain = document.getElementById("bgMain");
var worldvision = document.getElementById("worldvision");
var darkarea = document.getElementById("darkarea");
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var text3 = document.getElementById("text3");
var donate = document.getElementById("donate");
tl.from(worldvision, 1, {css:{bottom:"-70px"}})
.from(bgMain, 1, {css:{width:"350px", height:"275px"}}, "+0.2")
.from(darkarea, 1, {css:{opacity:"0"}})
.from(text1, 2, {css:{opacity:"0"}})
.to(text1, 2, {css:{opacity:"0"}})
.from(text2, 2, {css:{opacity:"0"}}, "+5.4") I would like this to start just before the last one finishes but I have to calculate all the way from the beginning of the timeline.
.from(text3, 1, {css:{opacity:"0"}})
.from(donate, 1, {css:{opacity:"0"}})

Any guidance would be great thanks!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 


Sorry to hear you are having problems.


The tween you commented on above should work like this:

.from(text2, 2, {css:{opacity:"0"}}, "-=0.5") // will start 0.5 seconds before the previous tween ends

I've edited one of our support starter pens to clearly illustrate how the relative position parameter should work:




I'm a bit puzzled why it didn't work for you as it seems your timeline is fairly straight-forward.


Feel free to fork it and add your html, css and JavaScript. Instructions on how to do that can be found here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/


I'm sure we can help you get it sorted.

Link to comment
Share on other sites

Hi Carl,


Thanks for the reply. Yeah I'm finding it really strange as when I put the code in a codepen it works and I have now set the position parameter correctly relating to the other animations. On my local machine it is not working with the "-=X" which must mean I'm missing a file? As when I link to all the files locally it animates but the positioning doesn't work correctly but if I just link to the CDN file it does work???


See the Pen jCymB?editors=101 by james508 (@james508) on CodePen

Link to comment
Share on other sites

Very strange is it possible you have a super old version of the GreenSock files?

Be sure to grab the latest from http://www.greensock.com/?download=GSAP-JS


There really is no reason why the codepen version would work but locally wouldn't... unless your local source files are bad in some ways. 


Let us know if a fresh batch of GSAP helps

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.