Jump to content
GreenSock

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

Search the Community

Showing results for tags 'multiple objects'.

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

  1. Hi, I have to create a 300x250 banner that will have circles moving slowly around the banner, changing size and position all randomly. Also they will need to be at random opacities. See the image attached. The opacity doesn't necessarily need to change. They all need to stay within 100px from the top and 20px from the bottom. Can be svg shapes or png images like the attached. I don't know where best to even start! Can anyone help? Thanks for any help.
  2. Hello, I'm starting to go nuts about this little animation I got going on with your very cool platform. This is what I want to happen (storyboard): #color_circle_1 (fadein) -> #color_circle_2 (fadein) -> #color_circle_3 (fadein) -> #color_circle_4 (fadein) -> Menu (slide down) -> #color_container (moves down and gets a smaller height). And then comes my problem. The #color_container does as wanted to, but the #color_circle_(1-4) moves down with it, but I want them to stay in the same position and not move with the Container. Does anyone have any ideas of how I could fix this tiny problem? I tried out several things, but I keep up getting the same animation. That the #color_circle_(1-4) keeps moving down with the Container moving down. So in basics I want colored circles to stay at their position while the Container animates smaller. HTML: <body> <header> <nav> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Process</a></li> <li><a href="#">Cases</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="white_circle_1" class="white"></div> <div id="white_circle_2" class="white"></div> <div id="white_circle_3" class="white"></div> <div id="white_circle_4" class="white"></div> <div id="color_container"> <div id="color_circle_1"></div> <div id="color_circle_2"></div> <div id="color_circle_3"></div> <div id="color_circle_4"></div> </div> CSS: * { margin:0; padding:0; border:0; } body { background: #edf4fa url(images/head_bg.png) no-repeat top center fixed; background-size: 100%; width: 100%; height: 100%; } li { list-style: none; } #color_container { width: 550px; position: absolute; left: 50%; ; overflow: hidden; } #color_circle_1, #color_circle_2, #color_circle_3, #color_circle_4 { position: absolute; left: 50%; border-radius: 400px; } #color_circle_1 { width: 250px; height: 250px; ; background: rgba(228,37,140,.7); top: 150px; z-index: 1; } #color_circle_2 { width: 350px; height: 350px; ; background: rgba(105,59,255,.5); top: 100px; z-index: 2; } #color_circle_3 { width: 450px; height: 450px; ; background: rgba(167,20,72,.5); top: 50px; z-index: 1; } #color_circle_4 { width: 550px; height: 550px; ; background: rgba(22,144,195,.5); top: 0px; z-index: 3; } #white_circle_1 { width: 250px; height: 250px; position: absolute; top: 300px; left: 50%; ; border-radius: 200px; } #white_circle_2 { width: 350px; height: 350px; position: absolute; top: 250px; left: 50%; ; border-radius: 200px; } #white_circle_3 { width: 450px; height: 450px; position: absolute; top: 200px; left: 50%; ; border-radius: 300px; } #white_circle_4 { width: 550px; height: 550px; position: absolute; top: 150px; left: 50%; ; border-radius: 400px; } .white { background: rgba(255,255,255,.5); } header { width: 100%; height: 120px; background: rgba(255,255,255,.8); display: block; position: absolute; top: 20px; } nav { left: 30%; } nav ul#menu { display: block; } nav ul#menu li { display: inline-block; } nav ul#menu li a { font-family: 'NexaBold'; } Script: <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.lettering-0.6.1.min.js"></script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { $('body').css('visibility','visible'); // TimelineLite for title animation, then start up superscrollorama when complete (new TimelineLite({onComplete:initScrollAnimations})) .from( $('#white_circle_1'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_2'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_3'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_4'), 0, {css:{opacity:'0'}}) .from( $('#color_circle_1'), 1, {delay: .8, css:{opacity:'0'}}) .from( $('#color_circle_2'), 1, {css:{opacity:'0'}}) .from( $('#color_circle_3'), 1, {css:{opacity:'0'}}) .from( $('#color_circle_4'), 1, {css:{opacity:'0'}}) .from( $('header'), 1, {css:{top: '-300px'}, ease:Sine.easeIn}) .fromTo( $('#color_container'), 1, {css:{top:'150px', height: '550px'}, collapsible: true, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '250px', height: '240px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_1'), 0, {css:{top: '150px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_2'), 0, {css:{top: '100px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '0px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_3'), 0, {css:{top: '50px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_4'), 0, {css:{top: '0px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-100px'}, ease:Sine.easeInOut}) function initScrollAnimations() { $('#content-wrapper').css('display','block'); var controller = $.superscrollorama(); } }); </script> As you can see I also tried out where I wanted to run the animation at the same time, but I simply don't know how to do that (I'm still a bit new to it all). Otherwise if I could run these 5 lines to animate at the same time then I think it could fix the problem, but only a noobish idea of mine: .fromTo( $('#color_container'), 1, {css:{top:'150px', height: '550px'}, collapsible: true, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '250px', height: '240px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_1'), 0, {css:{top: '150px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_2'), 0, {css:{top: '100px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '0px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_3'), 0, {css:{top: '50px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_4'), 0, {css:{top: '0px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-100px'}, ease:Sine.easeInOut}) Any suggestions because I could really use some, thanks. //Morten
×