Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'keyframe'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. Hello all I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems. The first is how to set keyframes, see the below css code: .element{ animation: ball 2s ease-in-out } @keyframes ball{ 25%{ background:red; } 50%{ background:yellow; } 75%{ background:green; } 100%{ background:black; } } //or a more complex one .Shake { animation: Shake 3s ease 0s forwards; } @keyframes Shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } I use TimelineLite.to() with accurate time setting to create a similar animation: var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}, 0.5) .to(element, 0.5s, {backgroundColor:green}, 1) .to(element, 0.5s, {backgroundColor:black}, 1.5) Is there any better way to create such a animation? And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens? For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes. .element{ animation: ball 2s ease-in-out } But in gsap, it just works on one of the tweens , not the whole timeline. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut}) .to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5); Any help very much appreciated!
  2. Hello everyone, I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP. @keyframes elliptical-anim { 0% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1); } 20% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1); } 96% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1); } 100% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1); } } I'm using the 3D version of the animations in order to force the hardware acceleration. Thanks in advance for your help !
  3. Hi, Is possible this css3 animation with gsap? http://jsfiddle.net/nGsk3/1/ Regards.
×