Jump to content
Search Community

FlipinX in greensock

Matt Rogers test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 (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

Link to comment
Share on other sites

Hi Matt Rogers  :)

 

i don't know what's your goal but seems you try to fake an ease effect ! right ... pls take a look at Elastic ease type

 

any way you can try these : 

 

- using nested timeline :

tl.add( tl1 ).add( tl2 , -1 )

- using .appendMultiple() , something like this : 

tl.appendMultiple( [ tween1 , tween2 , tween3 ] , 0 , "sequence");
  .appendMultiple( [ tween4 , tween5 , tween6 ] , -1 , "sequence");

this post can help you : http://greensock.com/forums/topic/11833-timelinemax-appendmultiple/

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

For the record, appendMultiple() is a deprecated method that's just legacy from really old Flash versions. there's a much cleaner, more concise way to handle things in the more modern API:

//OLD (deprecated):
tl.appendMultiple( [
  TweenLite.to(man,0.2,flipInX.first) ,
  TweenLite.to(man,0.2,flipInX.second) ,
  TweenLite.to(man,0.2,flipInX.third) ,
  TweenLite.to(man,0.2,flipInX.fourth) ,
  TweenLite.to(man,0.2,flipInX.fifth)
] , 0 , "sequence");

//NEW
tl.to(man,0.2,flipInX.first)
  .to(man,0.2,flipInX.second)
  .to(man,0.2,flipInX.third)
  .to(man,0.2,flipInX.fourth)
  .to(man,0.2,flipInX.fifth);

And like Diaco said, it sure seems like you're just going for an elastic effect which may be a lot easier like this:

tl.fromTo(car, 0.2, {opacity:0}, {opacity:1})
  .fromTo(car, 1, {rotationY:-20, transformPerspective:400}, {rotationY:0, ease:Elastic.easeOut.config(2, 0.6)}, "-=0.2");

You can tweak the numbers in the Elastic.easeOut.config() to get just the feel you want. See the ease visualizer at http://greensock.com/ease-visualizer/

 

Does that help? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...