Tweening Image and then Text Greensock and JS animation

Question

I am trying to tween an image and then have text come flying in afterwards. I have the image flying in already, but I can't seem to figure out how to make the text come in after the image is in...Also, I want to put a background to this entire div, but for some reason everything I've tried doesn't show up, nor does anything loop. Help? -- The image is something i've already made myself on Illustrator so I cannot upload the image but if someone can please help me fix this up, I'd really appreciate it!

Here's my HTML:

 <script src="js/TweenMax.min.js"></script>
<div class="container">
    <div class="row">
    <div class="twelvecol last">
    <div id="box">
        <img src="images/cartoon-illustration.png" alt="cartoon" width="150" height="277">
        </div>
        </div>
        </div>
        </div>

Here's my Javascript:

function init() {
            var b = document.getElementById("box");
            b.style.left = -500 + "px";
            TweenMax.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut})
        }
window.onload = init;

Here's my CSS:

#box {
            width: 400px;
            height: 400px;
            position: absolute;
            padding: 25px;
                        }

score 1 · Answer 1 · answered Mar 26 '13 at 11:34

Using onComplete as zpipe07 indicated is fine if you need to chain two, maybe three animations. For multiple animations, some of which run in parallel and some are chained to each other, it quickly becomes unmanageable.

You should use TimelineLite. Then your code would look like this:

function myFunction() {console.log('All done!')}

//create a TimelineLite instance. By default, it starts playing immediately, 
//but we indicated that we want it to wait until our signal. 
//We also want it to launch a function after all animations are complete.
var tl = new TimelineLite({paused:true, onComplete:myFunction})

//append a to() tween
tl.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut)

//add another sequenced tween (by default, tweens are added to the end 
//of the timeline, which makes sequencing simple)
tl.to(textElement, 1.5, {css:{left:200}, ease:Expo.easeOut})

tl.play()

You can add tweens to the beginning, end or any arbitraty place on a timeline at any time. You can pause, repeat, slowdown, fast forward or reverse timelines. You can assign labels and jump to them, nest timelines and more.

More info here: http://www.greensock.com/get-started-js/#sequencing

is this using JQuery? I need to use Javascript - So I'm slightly unsure what some of these mean - I do like this idea however, any chance you can help me with this in JS? — user2062373, Mar 26 '13 at 18:05
Maybe this is Javascript - I'm new to Green Sock, so I'm havng trouble understandinh this code with reference to my inital posted code and what I wanted to happen with it - I want the text to come after the animation so how would this code work with that delay? — user2062373, Mar 26 '13 at 18:08
I created a JSfiddle that demonstrates how Greensock timelines work. Please note that (1) no JQuery is required, (2) only TweenMax included, (3) selection of elements is done using Greensock. http://jsfiddle.net/brian_griffin/SWeNp/ — Sergey Snegirev, Mar 27 '13 at 09:14

zpipe07 · Answer 2 · 2013-03-25T20:09:20.240

To make some text animate after the image tween is complete, you can use the onComplete property. As expected, onComplete allows you to perform a function immediately after a tween is complete. So for example:

    function init() {
                var b = document.getElementById("box"),
                    textElement = document.getElementById("yourText");

                b.style.left = -500 + "px";
                textElement.style.left = -500 + "px";

                TweenMax.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut}, onComplete: function() {
                    TweenMax.to(textElement, 1.5, {css:{left:200}, ease:Expo.easeOut});
                });
            };
    window.onload = init;

Reference: http://www.greensock.com/get-started-js/

Tweening Image and then Text Greensock and JS animation

2 Answers2