AND Factory

I have put up what I have made so far as a demo: http://artndesignfactory.com/demo/ And to answer your question then my problem is that the 4 coloured circles I got they got an container, because I want to shrink/make this container smaller (with overflow hidden). It does shrink, but it doesn't do it smoothly. It makes a little bounce with the coloured circles instead them staying at the same position and just making the container shrink. And that in basics is the problem, the little bounce before shrinking. The demo I put up shows you where I am at and what I'm talking about.

Figured out how to add class="active" to the scroll script. This is the solution I ended up with: <script language="JavaScript" type="text/javascript"> $(function() { $("#click_home").bind('click', { id: '#home' }, scroller); $("#click_aboutme").bind('click', { id: '#about_me' }, scroller); $("#click_process").bind('click', { id: '#process' }, scroller); $("#click_cases").bind('click', { id: '#cases' }, scroller); $("#click_contact").bind('click', { id: '#contact' }, scroller); function scroller(event){ var scrollYPos = $(event.data.id).offset().top; event.preventDefault(); TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut}) } }); $("ul#menu li a").click(function() { $("ul#menu li a").removeClass("active"); $(this).toggleClass("active"); }); </script>

Nevermind my first question I was blind, but found my answer in: http://forums.greensock.com/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/ I now got another question to this. How do I add the class="active" once a men-button has been clicked? I used to use this function on my past page, but not entirely sure how to work in this to what I just added. Old js (add/remove class="active"): $('ul#menu li a').click(function() { var lsdata = $('#layerslider').layerSlider('data'); if(lsdata.isAnimating == false){ $('ul#menu li a').each(function() { $(this).removeClass('active'); }); $(this).addClass('active'); $('#layerslider').layerSlider($('ul#menu li a').index(this)+1); } }); This is the new coding I have added to make the menu auto scroll down to a section: <script language="JavaScript" type="text/javascript"> $(function() { $("#click_home").bind('click', { id: '#home' }, scroller); $("#click_aboutme").bind('click', { id: '#about_me' }, scroller); $("#click_process").bind('click', { id: '#process' }, scroller); $("#click_cases").bind('click', { id: '#cases' }, scroller); $("#click_contact").bind('click', { id: '#contact' }, scroller); function scroller(event){ var scrollYPos = $(event.data.id).offset().top; event.preventDefault(); TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut}) } }); </script> Any suggestions on how to do the Add/Remove class="active" ??

Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?

I have done a little more changes, but nothing that changes the outcome. Only made the Circles a bit bigger, because they didn't match up with my sketches size. But other than that still the same problem. Does anyone know how to avoid that bounce? Or do I just have to live with it? As I see it loading the different animations. I see it loading the CSS setup of the circles just 1 sec before the #color_container starts to move down. And as I see it that's what's making the small bounce happen. What I would love to happen is that it just makes #color_container smaller and keeping the positioning of the #color_circles_(1-4) as the same position, but as #color_container moves down the positioning follows. I have tried out a lot of css settings, but nothing works. Best result so far is with this 1 sec bounce before #color_container becomes smaller.

I figured out a small solution for it now, but now another problem has come up. It makes a little bounce before making the #color_container smaller. I think it's because it reads the CSS settings 1 sec before it animates the container smaller. This is what I have changed: CSS: #color_container { width: 550px; position: relative; left: 50%; ; overflow: hidden; z-index: 4; } #color_circle_1, #color_circle_2, #color_circle_3, #color_circle_4 { position: absolute !important; left: 50%; border-radius: 400px; } #color_circle_1 { width: 250px; height: 250px; ; background: rgba(228,37,140,.7); top: -5px; z-index: 1; } #color_circle_2 { width: 350px; height: 350px; ; background: rgba(105,59,255,.5); top: -55px; z-index: 2; } #color_circle_3 { width: 450px; height: 450px; ; background: rgba(167,20,72,.5); top: -105px; z-index: 1; } #color_circle_4 { width: 550px; height: 550px; ; background: rgba(22,144,195,.5); top: -155px; z-index: 3; } JS: .append([ TweenMax.from( $('#color_circle_4'), 1, {css:{top: '0px'}}), TweenMax.fromTo( $('#color_container'), .5, {css:{top:'150px', height: '550px'}, collapsible: true, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '305px', height: '240px'}, ease:Sine.easeInOut}), TweenMax.from( $('#color_circle_1'), 1, {css:{top: '150px'}}), TweenMax.from( $('#color_circle_2'), 1, {css:{top: '100px'}}), TweenMax.from( $('#color_circle_3'), 1, {css:{top: '50px'}}) ]) Maybe there is a way to make it do it at the same time. So it doesn't read the CSS first and container second, but reads both at the same time? I don't know, but this is what I have changed so far. Only that bounce that annoys me now.

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