position starts from beginning of timeline

[jamesb]

Hi,

 

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. 

 

<script>
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"}})
}
 
</script>

 

Any guidance would be great thanks!

[Carl]

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:

 

http://codepen.io/GreenSock/pen/yhKIf

 

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.

[jamesb]

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

[Carl]

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