[Control the Gif Animation]

thanks for help. One more queries is it possible to animate a transform origin like "center center" to "center bottom" ? its skipped quickly instead of easing. so please help to fix

[Control the Gif Animation]

Thanks Carl. But I need to animate images like as background 

See the Pen aOExdz by prakashtiger (@prakashtiger) on CodePen

 here As per your suggestion i did and you see its taking too much of time and not proper animated. I am really confused to fix. please let me know you have any thoughts.

[Control the Gif Animation]

Is it possible to control the gif animation image while pausing?

[clearProps not working]

Its windows 7 OS and nothing get any error. its not clear the rotation value

[clearProps not working]

Hi,

 

Can you please tell me any browser restriction for clearProps? . its not working in phantomjs while image generation as well as safari 5.1.7.

 

Any other solution to back previous state. 

[FlipinX in greensock]

Thanks for great help I used "add" instead of "appendMultiple" 

See the Pen yNMdvV by prakashtiger (@prakashtiger) on CodePen

 please check it out

[FlipinX in greensock]

Thanks for reply . I would like to start multiple tweens with same time and same duration   please check out it. the animation man and car played one by one instead of same . i did these based on http://greensock.com/position-parameter (Absolute: Anywhere topic)  the demo did play same time but i tried its played one by one.  i honestly said i dont know whats issue any thing need to add? 

[FlipinX in greensock]

 (Absolute: Anywhere not working) 

Anyone can you please explain how to change the below animation in greensock? iam new to one

 

@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}

60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}

80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}

 

 

I tired these like 

 

var flipInY ={

first:{transformPerspective:400,rotationY:90,opacity:0,startAt:{transformPerspective:400,opacity:0,rotationY:0}},

second:{transformPerspective:400,rotationY:-20,opacity:1,startAt:{transformPerspective:400,opacity:0,rotationY:90}},

third:{transformPerspective:400,rotationY:10,opacity:1,startAt:{transformPerspective:400,opacity:1,rotationY:-20}},

fourth:{transformPerspective:400,rotationY:-5,opacity:1,startAt:{transformPerspective:400,opacity:1,rotationY:10}},

fifth:{transformPerspective:400,opacity:1,rotationY:0,startAt:{transformPerspective:400,opacity:1,rotationY:-5}}

};

 

but  when tried to play two tweens like here at time its played one by one instead of same

 

timeline_lite.to('.feature1',0.2,flipInX.first,0)

.to('.feature1',0.2,flipInX.second)

.to('.feature1',0.2,flipInX.third)

.to('.feature1',0.2,flipInX.fourth)

.to('.feature1',0.2,flipInX.fifth)

.to('.ellipsis1',0.2,flipInY.first,0)

.to('.ellipsis1',0.2,flipInY.second)

.to('.ellipsis1',0.2,flipInY.third)

.to('.ellipsis1',0.2,flipInY.fourth)

.to('.ellipsis1',0.2,flipInY.fifth);

 

See the Pen bdqxmY by prakashtiger (@prakashtiger) on CodePen