How do I append/add to this timeline?

[joe_temp 1 Likes (Newbie)]

Here is my full script:

 

    <script>
        $(document).ready(function() {
            var controller = $.superscrollorama();

            //This code snippet is built on the parallax example:

            controller.addTween(
                  '#gun',
                  (new TimelineLite())
                    .append([
                          TweenMax.fromTo($('#hammer'), 1,
                            {css:{rotation: 0}, immediateRender:true},
                            {css:{rotation: -25}, ease:Quad.easeInOut}),
                          TweenMax.fromTo($('#trigger'), 1,
                            {css:{rotation: 0}, immediateRender:true},
                            {css:{rotation: 40}, ease:Quad.easeInOut})
                        ]),
                          500, // scroll duration of tween
                        200); // offset?

            });
    </script>

 

What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.

[Jonathan 5,176 Likes (Superhero)]

try replacing append() with add():

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

 

append has been deprecated

 

you can add another add() after your first add()

[Carl 9,066 Likes (Superhero)]

To add a tween to the existing timeline that you are adding to your SuperScrollorama controller try:

 

<script>

        $(document).ready(function() {

            var controller = $.superscrollorama();

 

            //This code snippet is built on the parallax example:

 

            controller.addTween(

                  '#gun',

                  (new TimelineLite())

                    .append([

                          TweenMax.fromTo($('#hammer'), 1,

                            {css:{rotation: 0}, immediateRender:true},

                            {css:{rotation: -25}, ease:Quad.easeInOut}),

                          TweenMax.fromTo($('#trigger'), 1,

                            {css:{rotation: 0}, immediateRender:true},

                            {css:{rotation: 40}, ease:Quad.easeInOut})

                        ]).append(TweenMax.to(something, 1, {someProp:someValue}),

                          500, // scroll duration of tween

                        200); // offset?

 

            });

    </script>

 

and yes, Jonathan is correct, add() is your best bet, but most of the SuperScrollorama docs use the older methods like append() and insert().

 

Also, the css{} object isn't entirely necessary either

 

TweenMax.to(element, 1, {css:{left:200}})

is virtually the same as

TweenMax.to(element, 1, {left:200})

 

The css{} way is just a teensy weensy bit faster, but only under severe stress would you ever notice a difference. 

[joe_temp 1 Likes (Newbie)]

Thank you guys so much for your help. I REALLY appreciate it.

 

Here's the only thing I'm confused about:

 

If I use the code Carl provided, all the tweens in the timeline share common duration and delay values. What If I want to independently control those for each tween? Is that possible?

 

It surely must be.

 

Any ideas?

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

I'm not sure if I understand correctly.

 

For example if you want the tweens to play in sequence you can use the add method, like Jonathan suggested, and align those tweens and even give them some time between each other:

var controller = $.superscrollorama();

//This code snippet is built on the parallax example:

controller.addTween(
	'#gun',
	(new TimelineLite())
            .add
            ([
		TweenMax.fromTo($('#hammer'), 1,
		{
		    css:{rotation: 0}, immediateRender:true
		},
		{
		    css:{rotation: -25}, ease:Quad.easeInOut}
		),
		TweenMax.fromTo($('#trigger'), 1,
		{
		    css:{rotation: 0}, immediateRender:true
		},
		{
		    css:{rotation: 40}, ease:Quad.easeInOut
		})
		], 'sequence', 1),//align and delay applied
	500, // scroll duration of tween
	200) // offset?

With that code you're stating that the tweens should play in the sequence they reside in the add method ("#hamer" first and then "#trigger") and there'll be a 1 second delay between the end of the first and the start of the second.

 

In order to give them different durations you do that in each of the TweenMax instances, like this:

TweenMax.fromTo($('#hammer'), 2,//this tween lasts two seconds
{
    css:{rotation: 0}, immediateRender:true
},
{
    css:{rotation: -25}, ease:Quad.easeInOut}
);

TweenMax.fromTo($('#trigger'), 1,//this tween lasts one second
{
    css:{rotation: 0}, immediateRender:true
},
{
    css:{rotation: 40}, ease:Quad.easeInOut
});

Hope this helps,

Rodrigo.

[joe_temp 1 Likes (Newbie)]

Rodrigo,

You are awesome. Plain and simple. I'm going to try this out later today and hopefully it will work. If it doesn't, it's probably something stupid on my end. If I can't figure it out after trying for a long time and search for answers, I'll come back.

 

Thank you guys SO much! This is the biggest challenge I've faced in months and I appreciate the input and the time.