WarenGonzaga

Members
  • Content count

    108
  • Joined

  • Last visited

Community Reputation

54 Contributor

About WarenGonzaga

  • Rank
    Front End Developer
  • Birthday 07/26/1997

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Manila, Philippines

Recent Profile Visitors

2,241 profile views
  1. Going back to GSAP Community.

  2. Hello I'm back! I am almost 2 years here on contributing to forum. I really love to help other users out there on using GreenSock Animation Platform. I shifted to WordPress a months ago. I would like to apply my knowledge in GSAP to WordPress to make awesome stunning websites. Alright!
  3. Can we create a basic retro game using GSAP?

    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.
  4. Open a link after tweening

    Hi there, Carl is right! You can use onComplete to call another function or use it as your link opener. refer to my codepen just for you! Hope it helps! Thanks!
  5. GreenSock Cheat Sheet

    Thanks man! I really appreciate your effort!
  6. Can we create a basic retro game using GSAP?

    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?
  7. Best Place to View HTML5 Banner Portfolios

    Based on my experience... my agency has a Laravel based staging tool which you can view the ads based on the sizes of different banners.
  8. Backup image

    This is crazy I love it .. thanks for sharing this stuff here in the forum! Waren | GSAP Enthusiast
  9. New Favorites Feature Added to Forums

    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
  10. Need to Build Interactive Bubble Cloud with Animations

    Hey chrisgannon ! Its nice to see you around here! I saw your awesome and incredible works... Waren | GSAP Enthusiast
  11. Animated Character Limit Validation

    Very cool bro! Thanks for sharing really helps!
  12. Repetitive code reduction

    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
  13. Plus sign preloader challenge!

    Hey there! I made a quick coding for preloader... I am not as pro as you expected but I try to accept your awesome challenge! Here's my work.,.. http://codepen.io/Waren_Gonzaga/full/xRadBR/ Here's my code: window.onload = init; var loadSpeed = 1, rotateDeg = 180, rotateDegLast = 360; function init() { TweenMax.set("#wrapper", {alpha: 1, onComplete: a}); } function a() { var tl = new TimelineMax({delay: 1, repeat: 5}); tl.set("#loadingbar", {css:{width: "0px"}}); tl.set("#preloader", {alpha: 0, top: "-=20px"}); tl.set("#loadingbox", {alpha: 0, top: "40px"}); //start tl.to("#preloader", 1, {alpha: 1, top: "+=20px"}) .to("#loadingbox", 1, {alpha: 1, top: "-=40px", ease:Power3.easeOut}, "-=1") .to("#loadingbar", loadSpeed, {css:{width: "+=50px"}, ease:Power2.easeInOut}) .to("#preloader", 1, {rotation: "+="+rotateDeg, transformOrigin: "46%"}) .to("#loadingbar", loadSpeed, {css:{width: "+=50px"}, ease:Power2.easeInOut}) .to("#preloader", 1, {rotation: "+="+rotateDeg, transformOrigin: "46%"}) .to("#loadingbar", loadSpeed, {css:{width: "+=50px"}, ease:Power2.easeInOut}) .to("#preloader", 1, {rotation: "+="+rotateDeg, transformOrigin: "46%"}) .to("#loadingbar", loadSpeed, {css:{width: "+=50px"}, ease:Power2.easeInOut}) .to("#preloader", 1, {rotation: "+="+rotateDegLast, transformOrigin: "46%"}) .to("#preloader", 1, {alpha: 0}) .to("#loadingbox", 1, {alpha: 0, top: "+=40px", ease:Power3.easeOut}) .to("#loadingbox", 0, {top: 0}); }
  14. How to handle mouseenter and mouseleave animation with TimelineMax?

    Hello daviddelusenet! Welcome to GSAP forum. Please could you provide a quick codepen about your problem so we can explore your code and make some quick edits for it. Here's how to create codepen.... Waren | GSAP Enthusiast
  15. Resize Browser, change height, width and Ypos, Responisve

    Hey buddy! Welcome to GSAP Forum and I really appreciate your wonderful problem with GSAP. Well head to my forked Codepen for you to check --> http://codepen.io/Waren_Gonzaga/pen/qqoNEw I'll explain how I did it, well the above suggestions was good and got a point. If you want to make your code flexible or what I mean is responsive please use a percentage instead of actual pixel. Pixel is specific measurement and percentage is what the screen size in percent. You can easily estimate the screen resolution using Percentage. Here's my quick edit to your codes in JavaScript: var el = document.getElementById("testDiv_id"); //Set The Tween Width TweenMax.set(el, {width: "80%"}); //Animate it to bigger size, previouslu 930px TweenMax.to(el, 1, {width:"90%", height:230, borderRadius:"0px 120px", onComplete:runTween}); //Subtract it to 25% because that is the percent of 730 over 800px function runTween() { TweenMax.to(el, 1, {width:"-=25%", height:130, y:150, borderRadius:"120px 0px"}); } //DevTip: Always use percentage if you want to be your work responsize! //Waren | GSAP Enthusiast. Explanation: The above code is revised, first I setup the width using set method in TweenMax. Then I calculate the percentage based on your original pixel measurement. That's it! I hope it helps... Additional I add wrapper div... just check it Waren | GSAP Enthusiast