CODEWITHSUNDEEP
javascriptanimationtweengsap
user2062373
user2062373

Reputation: 21

Tweening Image and then Text Greensock and JS animation

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;
                        }

Upvotes: 2

Views: 2288

Answers (2)

Sergey Snegirev
Sergey Snegirev

Reputation: 1026

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

Upvotes: 1

zpipe07
zpipe07

Reputation: 1

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/

Upvotes: 0

Related Questions