Jump to content
Search Community

How do I append/add to this timeline?

joe_temp 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

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.

Link to comment
Share on other sites

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. 
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
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...