Jump to content
Search Community

Search the Community

Showing results for tags 'javascript css'.

  • 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 2 results

  1. Hi guys first of all let me congratulate you on your js engine - it's looking pretty awesome. I have a question about tweening the css properties for top and left - i've implemented it as it seems like it should be but im not getting any result from the positional tweens, although the backgroundColor tween is working correctly. <!DOCTYPE html> <html> <head> <title>Test Animation</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/TimelineLite.min.js"></script> <script type="text/javascript" src="js/TweenLite.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var plus = document.getElementById('plus'); var timeline = new TimelineLite(); timeline.append(new TweenLite(plus, 1, {css:{opacity:"0"}, ease:Quad.easeOut})); timeline.append(new TweenLite(plus, 1, {css:{opacity:"1"}, ease:Quad.easeIn})); timeline.append(new TweenLite(plus, 1, {css:{top:"500px", left:"100px", backgroundColor:"#ff9900"}, ease:Bounce.easeOut})); }); </script> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="banner"> <img id="plus" src="img/plus.png" alt="plus"> </div> </body> </html> I've tried dropping #plus into a div and animating that but that's not working either - is there a css trick i'm missing to be able to do this?
  2. Theres some very smart people on here, maybe you could help. Is there a use in GSAP for getting around a familiar issues, using %, vw/min/max as Z translation values? I get that the translation is interpreted as a factor of the element 2d dimensions so Z is zero and therefore trivial in use here. And I get you can do chained transforms with rotations, but I've found this doesn't play nicely in animation, some of the vectors and rotations in the chain get executed instantaneously at the end or the beginning of a CSS transform.
×
×
  • Create New...