Jump to content
Search Community

what would be the most efficient way to do this animation?

jaxi123 test
Moderator Tag

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

hey guys! so basically i want to create an animation where blocks fade in from opacity: 0.0 and then drop on top of eachother and build a tower from those blocks, they should not sit perfectly on top of eachother but instead a little random and misplaced like each block have different "margin-right", "margin-left" and "margin-top" 

 

now, here is how i would do it:

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

<style>
  
  #blockbox{
    float: left; 
  }
  
#block1 {
    position: relative;
    width: 200px;
    height: 34px;
    background-color: #b3c8cd;
    opacity: 1.0;
 margin-left: 20px;   
    
}
  
#block2 {
    position: relative;
    width: 200px;
    height: 34px;
    background-color: #b3c8cd;
    opacity: 1.0;
    margin-top: 30px;
    margin-right: 20px;
 
 
    
    
}
  
#block3 {
    position: relative;
    width: 200px;
    height: 34px;
    background-color: #b3c8cd;
    opacity: 1.0;
    margin-top: 30px;
 margin-right: 30px;
    
    
}
  
#block4 {
    position: relative;
    width: 200px;
    height: 34px;
    background-color: #b3c8cd;
    opacity: 1.0;
    margin-top: 30px;
 margin-left: 40px;
    
    
}
 
</style>
 
<div id="blockbox">
  <div id="block1"><p style="display: block;  vertical-align: middle; line-height: 34px; text-align: center;">Butiks Salg</p></div>
  <div id="block2"><p style="display: block;  vertical-align: middle; line-height: 34px; text-align: center;">Dyre Patenter</p></div>
  <div id="block3"><p style="display: block;  vertical-align: middle; line-height: 34px; text-align: center;">Uendelige Funktioner</p></div>
  <div id="block4"><p style="display: block;  vertical-align: middle; line-height: 34px; text-align: center;">Dyre Sponsorater</p></div>
</div>

 

<script>
window.onload = function() {
        var block1 = document.getElementById("block1"),
        block2 = document.getElementById("block2"),
        block3 = document.getElementById("block3"),
        block4 = document.getElementById("block4");
 
 
  
  TweenLite.from(block1, 1, {opacity:0, top:"300px", delay:1});
  TweenLite.from(block2, 1, {opacity:0, top:"300px"delay:2});
  TweenLite.from(block3, 1, {opacity:0, top:"300px"delay:3});
  TweenLite.from(block4, 1, {opacity:0, top:"300px"delay:4});
 
   
}
  
  
</script>
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------
now, thats all good. thing is i have 27 blocks.. do i really need 27 tweens and "div=id" to do this? or is there some way to randomize their horizontal position within a specific space? what i am doing here just seems wrong, but i dont know. i've only got 1 day of experience with javascript and a few hours with gsap..
 
thank you!
 
- jonas.
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Frankly that is a fairly ambitious undertaking even if you had a few months of JavaScript experience. 

The GSAP part is fairly straight-forward, but there are quite a few calculations that need to take place to generate the bricks and place them in the proper place.

Really this challenge is 95% JavaScript, jQuery and Math and only about 5% GSAP. In such cases we usually decline offering much assistance as our focus for offering support is largely on GSAP. 

 

However, it being late on a Thursday night I thought I would take a quick stab.

 

The general concept is that you don't want to create a bunch of divs by hand, nor do you want to create custom classes for each brick. So the majority of the work is going to be handled by a JavaScript loop that generates brick divs and also dynamically assigns css values to affect the vertical and horizontal placement. To make things more complicated you want multiple rows and columns of bricks that have random horizontal offsets. This requires nesting loops or fancy use of the modulus operator to generate coordinates in a grid of rows and columns; not really JavaScript day 1 stuff.

 

And since your bricks will be falling and stacking on top of each other, you need to build or animate the bottom row first which causes a bit of kink too.

 

Anyway, my first approach was to

 

1: build a grid of bricks out of divs with class="brick"

2: After the wall is completely constructed use a very basic staggerFrom() method to stagger them all from a y of 0

 

The animation can be handled in literally 1 line of code

tl.staggerFrom(".brick", 0.5, {y:-20, ease:Power2.easeIn}, 0.05)

http://codepen.io/GreenSock/pen/ublFL

 

The problem with this is approach is that the duration of the tween for each brick is the same which means bricks that travel a shorter distance towards the top of the wall will appear to be moving much slower than the bricks that need to travel a greater distance. This just looks too weird.

 

So my next approach involved creating the tweens for each brick as the bricks were being created. This allowed me to easily divide my speed value (400px per second) by the distance needed to travel (the ending y position of the brick) which gave me the duration I needed for each brick (each brick in each row uses the same speed).

 

This code is far from elegant, flexible or optimized but I think it gives a superior end result over the first example:

http://codepen.io/GreenSock/pen/HkzJG?editors=011

  • Like 4
Link to comment
Share on other sites

thank you very much :) i see that this might be a complicated task for a fresh beginner like me, but i am sure i will be able to figure something out from the code that you provided. now, i have a last question. Would creating 27 different divs and tweens ruin performance or would it still run smooth on the majority of computers or internet connections? 

Link to comment
Share on other sites

There are many factors that weigh into performance so there is no magic number of tweens that I would recommend not exceeding.

From practical daily usage, I would not worry about 27 tweens unless you are rotating really large semi-transparent overlapping images or something known to cause processing stress.

 

My example above has 120 tweens, and I'd doubt you would notice any issues whatsoever on the majority of computers.

 

Happy Tweening!

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
  • Recently Browsing   0 members

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