Simple Question

[silverd]

Hello

 

i think it's simple but i would like add and remove a image .gif in my timelineMax

I tried to do :

tl.to(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut});

and add or insert

but my problem it's that the image .gif begin in start of timeline but i don"t want that, because the .gif is animate and the animation have to start after few others animations. 

I tried with onComplete and the function but after i don't know how the remove it because after the gif animation i have few others animations and I think it's not the best way

function addImageGif () {
    document.getElementById("imgText").innerHTML='<img src="img/text.gif">';
};

Can you help me ?

 

Thanks

 

[Rodrigo]

Hi,

 

What you could use is the add() method to append the function at a certain point of the timeline. You said that you need to play other animations before, so you can add those animations and then add the call to the function that adds the element, like this:

var tl  = new TimelineLite();

tl
  .to(element1, time, {vars})
  .to(element2, time, {vars})
  .add(addImageGif)
  .to(element3, time, {vars});

function addImageGif()
{
  document.getElementById("imgText").innerHTML='<img src="img/text.gif">';
};

The same can be achieved with the call() method:

var tl  = new TimelineLite();

tl
  .to(element1, time, {vars})
  .to(element2, time, {vars})
  .call(addImageGif)
  .to(element3, time, {vars});

function addImageGif()
{
  document.getElementById("imgText").innerHTML='<img src="img/text.gif">';
};

As for the removing part, that should be easy, just use removeChild(), you could call it on the children's specific index (which can become quite messy if you have more elements), on the children tag (but if you have more <img> elements inside it can also become a problem) or directly based on the element's id, which would be the best choice, for that you should modify your code a little:

function addImageGif()
{
  document.getElementById("imgText").innerHTML='<img src="img/text.gif" id="addedImage">';
};

document.getElementById("imgText").removeChild(document.getElementById("addedImage"));

Rodrigo.

[silverd]

Hi Rodrigo,

 

thanks

 

I wanted to know : why It's not possible to do easily

tl.add(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut});

or .to or .insert
because the image.gif is load in the start of animation

I throught that as the "addchild" in flash until i don't use "addchild" the animation.gif is not load

 

A bit like "load" my picture just in my timeline at the precise moment I want without using a simple function for it. Because there my function is very very simple maybe too simple for just load one image.gif

 

But it's maybe not possible without it.

 

Thanks

[Rodrigo]

Hi,

 

I'm going to presume that you have a variable called slide02 that most likely is a div element. Since the add method accepts a tween, timeline, label, function or an array there's nothing wrong with adding the append call at that particular point, but because you're using the append method directly instead of referencing to it it's get called immediately. Take the following:

function addImage()
{
  alert("foo bar!!");
}
//this animates element1, then element2, then calls the function and finally animates element3
tl
  .to(element1, time, {vars})
  .to(element2, time, {vars})
  .add(addImage)
  .to(element3, time, {vars});

//this calls the function and animates element1 at the beggining, then animates element2 and finally animates element3
tl
  .to(element1, time, {vars})
  .to(element2, time, {vars})
  .add(addImage())
  .to(element3, time, {vars});

What I don't quite get is why you want to load the image at a certain moment, keep in mind that the loading operation could take a little time (even for a smaller image) and during that time your timeline will keep playing, therefore you might get get some sync problems in your sequence because of it. The way I see it the best choice is to load your image in an invisible container, which you already have since you're tweening the autoAlpha value to 1, which means is at 0.

var slide02 = document.getElementById("slide02"),
    newImg = document.createElement("img"),
    newImg.src = "http://www.domain.com/img/text.gif",
    tl = new TimelineLite();

//we set the container's opacity to 0 and remove it from document flow
TweenLite.set(slide02, {autoAlpha:0});

//now we add the image
slide02.appendChild(newImg);

tl
  .to(element, time, {vars})
  .to(element2, time, {vars})
  .to(slide02, 1.2, {autoAlpha:1, ease:Power2.easeOut})
  .to(element3, time, {vars})

Best,

Rodrigo.

[silverd]

Hello Rodrigo,

This is a continuation of my question about text animation on the path
I have not been able to do what I wanted with my text animation so I had to tweak it, taking a .gif animation is text around my form.
That's why I have to trigger this gif. at a specific time.

I know it's not a best practice but since I can not do it I had to try another way

 

I should add the ".gif" at this time otherwise the animation will start from the beginning of the timeline and thus arrived at the point in question, the animation is already finished: (

 

Best

Jeff