Jump to content
Search Community

Calling TimelineLite Issue

stevenp 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

Greetings,

Thank you for reading, and for any insight anyone can offer. It is appreciated.

I adapted the code from this demo on codepen:

See the Pen bpezc by GreenSock (@GreenSock) on CodePen



... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal).

This works:
 

window.onload = function() {
    var logo4 = document.getElementById('logo4');

    var tl4 = new TimelineLite();
        
    $("#play").click(function() {

        tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) );
    });    

    $("#pause").click(function() {
            //alert("Pause Button");
            tl4.pause();
            //tl4.play(0);
    });
}


This does not:
 

window.onload = function() {
    var logo4 = document.getElementById('logo4');

    var tl4 = new TimelineLite();

    $("#play").click(function() {
            tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) );
            //tl4.restart();
            tl4.play();
    });
}


Nor does this:
 

window.onload = function() {
    var logo4 = document.getElementById('logo4');

    var tl4 = new TimelineLite();

    tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) );
        
    $("#play").click(function() {
        tl4.play();
    });
}

It only works if the timeline is put in the function of the button ... but in codepen:

var tl = new TimelineLite({onUpdate:updateSlider});
tl.set("#content", {visibility:"visible"})
  .from("h1", 0.5, {left:100, autoAlpha:0})
.from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25")
.from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature")
.from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25")
.staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger");

$("#play").click(function() {
// function
}

Obviously, I am missing something.  :-)

 

Thanks for any guidance offered.

 

Steve

 

Link to comment
Share on other sites

Hi

 

I believe that the issue is that you're adding paused instances to the timeline, instead create the timeline paused, add the instances and use the buttons to control the timeline's playback, like this:

 

var to = new TimelineLite({paused:true});

 

$("#button").click(function()

{

tl.to(logo4, 2, {vars});

tl.play();

});

 

Best

Rodrigo

Link to comment
Share on other sites

rhernando, thanks for reading and answering.

 

I'm trying to figure out how to "make it work" with the timeline outside of the function, like in the codepen example:

var tl = new TimelineLite({onUpdate:updateSlider});
tl.set("#content", {visibility:"visible"})
  .from("h1", 0.5, {left:100, autoAlpha:0}) // autoAlpha handles both css properties visibility and opacity.
.from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") //add tween 0.25 seconds before previous tween ends
.from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") // add feature label at start position of this tween
.from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") // add tween 0.25 seconds after the feature label
.staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); 
		  
$("#play").click(function() {
// function here ...
}
Link to comment
Share on other sites

Hi stevenp,

 

From what I understand, Rodrigo has good advice regarding adding the paused tween to the timeline. It is better to pause the timeline than the individual tween.

 

Using his advice you can still build the timeline outside the button function, and just play() it when the button is clicked (which is usually the best way to do it).

 

In order to better serve you, please create a simple codepen demo that we can look at (to start just fork our example and replace the code with yours). 

 

This way we will be able to more specifically address and fix whatever issues there may be.

Link to comment
Share on other sites

Hi

 

I believe that the issue is that you're adding paused instances to the timeline, instead create the timeline paused, add the instances and use the buttons to control the timeline's playback, like this:

 

var to = new TimelineLite({paused:true});

 

$("#button").click(function()

{

tl.to(logo4, 2, {vars});

tl.play();

});

 

Best

Rodrigo

Thank you, Rodrigo, but I tried it and this doesn't do anything:

var tl4 = new TimelineLite({paused:true});

$("#play").click(function() {
        tl4.to(logo4, 2, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) );
        tl4.play();
});   

I changed tl to tl4 for consistency.

 

I'm going to leave well enough alone and chalk it up to user inexperience on my part. Thank you for trying to help me. :-)

Link to comment
Share on other sites

Hi Steve,

 

Your last code still shows the tween being paused

 

tl4.to(logo4, 2, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) );
 
Also keep in mind if that code is fired each time you click, you will be adding a new tween to the timeline on each click which doesn't really do much as each tween is animating the same properties to the same values. In other words, once you tween the left to 542px, tweening again to 542px isn't going to do anything that you can see. 
 
I think you will find something like this will work for you.
 
var tl4 = new TimelineLite({paused:true});
tl4.to(logo4, 2, {borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'});


$("#play").click(function() {
       
        tl4.restart();
});  

See it on codepen here:

http://codepen.io/GreenSock/pen/42198f92901515141607a8c717ac420a

 

If we are misunderstanding the effect you are going for, just let us know. I'm sure either Rodrigo or I can help you through it.

 
  • Like 1
Link to comment
Share on other sites

 

Hi Steve,

 

Your last code still shows the tween being paused

 

tl4.to(logo4, 2, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) );
 
Also keep in mind if that code is fired each time you click, you will be adding a new tween to the timeline on each click which doesn't really do much as each tween is animating the same properties to the same values. In other words, once you tween the left to 542px, tweening again to 542px isn't going to do anything that you can see. 
 
I think you will find something like this will work for you.
 
var tl4 = new TimelineLite({paused:true});
tl4.to(logo4, 2, {borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'});


$("#play").click(function() {
       
        tl4.restart();
});  

See it on codepen here:

See the Pen 42198f92901515141607a8c717ac420a by GreenSock (@GreenSock) on CodePen

 

If we are misunderstanding the effect you are going for, just let us know. I'm sure either Rodrigo or I can help you through it.

 

 

Thank you Carl. That does in fact work. Clearly, I have a lot to grep. It would probably help if I was more thorough in my reading and comprehension. I do appreciate the time you've both taken to help me. Much thanks.

 

May I sum up my understanding?

  1. Set the timeline variable outside of a function (scope), and in a paused state.
  2. Set up the timeline
  3. Set up each button with the appropriate function

Best regards,

 

Steve

Link to comment
Share on other sites

 

Also keep in mind if that code is fired each time you click, you will be adding a new tween to the timeline on each click which doesn't really do much as each tween is animating the same properties to the same values. In other words, once you tween the left to 542px, tweening again to 542px isn't going to do anything that you can see.

 

Maybe I'm going crazy, but the tween when it works sends the element to the right. :blink:

 

Thanks again,

 

Steve

Link to comment
Share on other sites

Hi Steve,

 

The value of left property stands for how far from the left border of it's parent or original position (depends on the element's position property)an element is, so bigger the value farther from the left border of the parent it'll be.

 

Check the following links for more information and some samples:

 

http://www.w3schools.com/cssref/pr_pos_left.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/left

http://www.w3.org/TR/CSS2/visuren.html#position-props

 

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