• Content count

  • Joined

  • Last visited

Community Reputation

52 Contributor

About WarenGonzaga

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

Contact Methods

Profile Information

  • Gender
  • Location
    Manila, Philippines

Recent Profile Visitors

1,932 profile views
  1. 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.
  2. This is crazy I love it .. thanks for sharing this stuff here in the forum! Waren | GSAP Enthusiast
  3. 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
  4. Hey chrisgannon ! Its nice to see you around here! I saw your awesome and incredible works... Waren | GSAP Enthusiast
  5. Very cool bro! Thanks for sharing really helps!
  6. 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
  7. 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}); }
  8. 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
  9. 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
  10. What a very nice story buddy! I really appreciate your inspiring story with GSAP.... I am from noob guy into superhero with this awesome animation platform out there. From an ordinary developer into superhero developer with GSAP. Thanks! Waren | GSAP Enthusiast
  11. Any updates on the animation? Did you manage to create the animation for your website?
  12. It would be nice to provide a codepen for your issue buddy. Welcome to GSAP Forum! I suggest use different functions with animation inside and call them at same time. for example: window.onload = init; //call the function that will call all the animation at same time. function init() { one(); two(); } function one() { // tl animation here repeating } function two() { // tl animation not repeating } Hope it helps buddy! GSAP Enthusiast Waren
  13. I think this is the animation you want to achieve? Please let me know thanks! Hope it helps... window.onload = init; //first initialize the animation var el = document.getElementById("element"); //object function init() { blinking(); //blinking animation movement(); //movement animation } function movement() { TweenMax.to(el, 2, {x: 500, ease:Power0.easeOut, onComplete: stop}); } function blinking() { var tl = new TimelineMax({repeat: -1}); tl.to(el, 0.5, {alpha: 0}) .to(el, 0.5, {alpha: 1}); } //this will kill all the animation function stop() { TweenMax.killAll(); } This is the codepen for you: http://codepen.io/Waren_Gonzaga/pen/vXQOYz GSAP Enthusiast Waren
  14. Jonathan I need to call first the init function so that I will setup the positions of the elements and objects then it will call multiple functions with unique animations. I've tried to use onComplete event but it is only 1 function at time. I've tried this also... TweenMax.set({onComplete: a}); TweenMax.set({onComplete: b}); TweenMax.set({onComplete: c}); But that's unprofessional.. is there any gsap method to call different animation at same time when the init functions is intialized.
  15. Hello there, I am trying to call 3 different functions to animate 3 different animation in one shot through init() function. How I can achieve this properly. function init() { TweenMax.set("#object", {alpha: 0}); a(); b(); c(); } function a() { TweenMax.to("#object1", {x: "+=100px"}); } function b() { TweenMax.to("#object2", {x: "+=200px"}); } function c() { TweenMax.to("#objec3", {x: "+=300px"}); } Hopefully I will know the solution as soon as possible thanks gsap masters!