Share Posted August 29, 2013 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 More sharing options...
Share Posted August 29, 2013 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() Link to comment Share on other sites More sharing options...
Share Posted August 29, 2013 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 More sharing options...
Author Share Posted August 31, 2013 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 More sharing options...
Share Posted August 31, 2013 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 More sharing options...
Author Share Posted September 2, 2013 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now