Jump to content
GreenSock

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

Search the Community

Showing results for tags 'css-animation'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. How can achieve this animation with GSAP. Here is the css code .element { -webkit-animation-name: fall, opacity; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 1s; } @-webkit-keyframes fall { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(21px); } } @-webkit-keyframes opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } Here is what I tried but the animation is not very good: var tlm=new TimelineMax({repeat:-1, delay:delay, repeatDelay:0, yoyo: false, ease: Sine.easeIn }); tlm.from(elem, 1, {y:0, opacity:0 }) .to(elem, 1, {y:10, opacity:1 }) .to(elem, 1, {y:20, opacity:0 }); It animates with steps. Here is the fiddle. Can I make separate function for opacity and translate-y?
×