[TimeLine Filp-animation doesnt work]

k, i solved this by using :

 

let square = document.getElementById("square")

//do animation

this.Timeline.to(square, 1, { height: 0, y: 15/*half of the y of your svg viewbox*/ })

this.Timeline.to(square, 1, { height: 30/*maxheight of your svg viewbox*/, y: 0 })

[How to clear a Timeline exactly at the end of current Animation]

can you maybe change the title of this topic to how to "clear" instead of restart .... thanks  

[How to clear a Timeline exactly at the end of current Animation]

Hey Sahil

i added two lines of code

 

document.getElementById('btn').addEventListener('click', function(){
  clear = Math.ceil(tl.time());
  tl.time(clear) //added

  tl.clear() //added
});

 

so now it finishes the frame first and then clears thank you

[How to clear a Timeline exactly at the end of current Animation]

Hey Carl ,

 

1st thank you

2nd i found its actualy the clear() method that i have trouble with.

If the user clicks the button 5.4 seconds into a 20 second long animation they should watch the animation play till second 6 and then timeline shall clear

[How to clear a Timeline exactly at the end of current Animation]

Hi there, i have a timelineMax with many animations added.

when i click a button i want reset the timeline and add completly new animations to the timeline so i do:

timeline.clear()

timeline.to(myAnimation)

timeline.restart()

unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them.

How can i wait till the current animation has finished and then restart/clear?

Im not at the end of the timeline so timeline.progress() is not an option.

 

Thank you

[TimeLine Filp-animation doesnt work]

Hi there ,

 

i want to animate an svg rectangle so it flips one time. Back and front have the same color.

when i execute

this.Timeline.to(square, 4, { fill: "red", rotationY:180} )

it does the fill, but not the rotation

 

what am i doing wrong ?

See the Pen qpjpNv by anon (@anon) on CodePen