Jump to content
Search Community

Animating Container smaller, but have Child same size not moving with Container

AND Factory test

By AND Factory
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

AND Factory test

AND Factory

Posted
Posted

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

Link to comment
Share on other sites
AND Factory test

AND Factory

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
AND Factory test

AND Factory

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Hi,

 

I'm having a little trouble following everything as you describe it.

At this point it might be best to make a really simple example of what aspect of the animation tools aren't working as expected. 

 

The best thing to do would be to use codepen (or jsfiddle) to make a demo with as few elements and dependencies as possible. For instance, take superscrollorama completely if possible.

 

Would love to help you find a solution to anything GSAP related in your file. Right now it kind of seems like you are getting unexpected behavior just with some css, not really sure.

 

Also if you see some jumping or flashing elements between the time the page renders and the javascript runs, the best thing to do is to hide your elements with css, something like

#wrapper {
  visibility:hidden;
}

and then when your javascript runs use

TweenLite.to("#wrapper, 0.2, {autoAlpha:1});

basically your elements will not appear until the js is ready to handle the animation

Link to comment
Share on other sites
AND Factory test

AND Factory

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
jamiejefferson test

jamiejefferson

Posted
Posted

Instead of trying to move and shrink the container, meanwhile adjusting the descendants to compensate, you might be better off using a css clip rectangle. That way you can just position all your circles as you need them (since I don't think they are meant to move at all right?) and animate adjustments to the mask.

#ccontainer {
  position: absolute;
  clip: rect(0px, 750px, 750px, 0px);
  // allows all circles to be visible to begin with
}

// and you want to finish with:
clip: rect(200px, 750px, 500px, 0px);
// crops to a 300px high box, 200px from the top

// you can tween this change with GSAP too
TweenLite.to(ccontainer, 1, {clip:"rect(200px, 750px, 500px, 0px)" });

Clip values can be a little confusing. They work like this:

rect(
  top side of clipping rectangle - as distance from top of element,
  right side of clipping rectangle - as distance from left of element,
  bottom side of clipping rectangle - as distance from top of element,
  left side of clipping rectangle - as distance from left of element
);

or if it makes more sense, think of it like defining the top left (1) and bottom right (2) corners of a rectangle using css top, left:

rect( y1, x2, y2, x1 );

and whatever is inside the rectangle is visible.
 
If you had a codepen of jsfiddle I could have worked out some more specific code for you, but it's not so simple editing your live site.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...