Jump to content
Search Community

WarenGonzaga

Members
  • Posts

    127
  • Joined

  • Last visited

Posts posted by WarenGonzaga

  1. On 8/14/2018 at 9:13 PM, GreenSock said:

    This might also be useful for bookmarking because it provides an overview of which tools are inside TweenMax, what the CDN links are, which of the tools are members-only, etc.: 

     

     

     

     

    Happy tweening!

     

    I love it jack! Thanks for sharing!

    • Like 1
  2. 2 minutes ago, Stagnax said:

    hi @WarenGonzaga

    Thanks for the effort.

    But i wanted to reveal the black background after the red and blue blocks have rotated

    To point it perfectly as jonathan pointed out :

    1. I think you mean to rotate and have the red and blue boxes be extended past the viewport, so when rotated you don't see the black background on the body tag. Because when you view your codepen on a larger screen that is 1080p, you will also see the black body background on both right and left sides. So you will need to fix your initial HTML markup to account for when its rotated taking up half the screen for each blue and red box.

     

    Again thank you

     

    Anyway, you can follow @Jonathan suggestion... 

  3. Hello @Stagnax Here's my solution...

    See the Pen dmyvKG by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

     

    What I've done is I made an extra layer of black in the background of your rotating elements.
     

    div#black {
      background: black;
      position: absolute;
      height:100vh;
      width: 100vw;
    }

     

    and then add z-index to your row so it will be in the top of the whole show...

    div#row {
      z-index: 100;
    }

     

    and here's how I setup the whole show...

    window.onload = init;
    
    function init() {
      var canvas = document.getElementsByClassName('rot');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
      
      TweenMax.set("#black", {opacity: 0, onComplete: animation});
    }
    
    function animation() {
      TweenMax.to("#row", 3, {rotation:-90, onComplete: revealBlackBG});
    }
    
    function revealBlackBG() {
      TweenMax.to("#black", 1, {opacity: 1, ease:Linear.easeIn});
    }
    

     

    I hide first the black layer and then after the animation done you eventually show it at the end... 

     

    Let me know if it is really helpful...

  4. What if... set first the default color of the background and tween it with black after the tween animation done.

    If you don't understand, what I mean is set it first as white background and don't set it on the css make it on the javascript.

    After the animation has been done then put a trigger to call the tween for the black background to appear. Doest it make sense?

    • Like 2
  5. 2 hours ago, Maelfyn said:

    I've made a few games using GSAP:

    Nevergrind - Single-Player RPG

    Firmament Wars - Realtime Multiplayer Strategy Game

    I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC).

     

    Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.

     

    Alright! Very nice game you have developed with GSAP. I know the feeling creating game using GSAP. Here's my basic usage of GSAP with my little tank.

    See the Pen dMpjMy by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

     

  6. Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?

    • Like 1
  7. Hey there buddy... I am a little bit busy these days... but I am here again and I am seeing this new update from the forum... and this is a pretty cool feature, I am struggling to find my most helpful posts from this forum and now I am very happy to have this finally... thanks to all who suggest. 

    Waren | GSAP Enthusiast

    • Like 1
  8. Hey there buddy and Welcome to GreenSock Forum!

    First of all buddy please could you please provide a quick codepen of your work?

    This will help us to explore your code and fix it by forking your codes....

    Here's the link for creating your very own codepen!
    http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

    Here's a video buddy!



    ====

    I suggest try to loop some of repetitive lines on your code.

    Waren | GSAP Enthusiast
    • Like 1
×
×
  • Create New...