Jump to content
Search Community

WarenGonzaga

Members

  • Posts

    127

  • Joined

  • Last visited

 Content Type 

Everything posted by WarenGonzaga

1
2
3
...
6
Page 2 of 6  
  1. WarenGonzaga
    Hey chrisgannon ! Its nice to see you around here! I saw your awesome and incredible works... Waren | GSAP Enthusiast
  2. WarenGonzaga
    Very cool bro! Thanks for sharing really helps!
  3. WarenGonzaga
    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
  4. WarenGonzaga
    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}); }
  5. WarenGonzaga
    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
  6. WarenGonzaga
    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
  7. WarenGonzaga
    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
  8. WarenGonzaga
    Any updates on the animation? Did you manage to create the animation for your website?
  9. WarenGonzaga
    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
  10. WarenGonzaga
    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
  11. WarenGonzaga
    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.
  12. WarenGonzaga
    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!
  13. WarenGonzaga
    You're site is awesome buddy! Carl or Jack would help you about the animation that you want to achieve! My experience is not enough for that kind of stunning animation. Let's see what's Carl, Jonathan and Jack suggests about your animation request. Thanks! GSAP Enthusiast, Waren
  14. WarenGonzaga
    If that is url, can you please shortened in using goolge shortener so we can able to see what you're trying to do
  15. WarenGonzaga
    Hello buddy! Welcome to GSAP Forum! I notice that you have no attachment or links on what you're talking about it is better to give the link or picture attached on your post thanks! Anyway if you're looking for advance tweening or usage of timelinelite or max watch the video below! GSAP Enthusiast, Waren
  16. WarenGonzaga
    Hello you should best answer the solution of Jonathan that's the right one and very flexible I recommend to use labels it would be great! GSAP Enthusiast, Waren
  17. WarenGonzaga
    Hello buddy! I'm back! Here's the forked codepen of yours... My suggestion don't rely on css to manipulate your image. You can use the cssplugin of GSAP don't be confuse the cssplugin is built in on the gsap tweenmax. You should add plugin if you're using tweenlite. Please manipulate the element using the GSAP variables such as menu_tl .to('.navbar', 0.5, { opacity: '1' }) .to(".big_image", 0.5, { css:{width: "300px", height: "140px"}, // you should use this for smooth animation. }); I've edited also your css and you must have a look to my forked pen of yours. Codepen: http://codepen.io/Waren_Gonzaga/pen/YGEEbW Hope it helps! GSAP Enthusiast! Waren
  18. WarenGonzaga
    Hello @benedex82! Welcome to GSAP Forum! Please stand by while I am finding solution for your issue! GSAP Enthusiast, Waren
  19. WarenGonzaga
    Such a cool project blake!
  20. WarenGonzaga
    Thanks for the effort dude!
  21. WarenGonzaga
    Is there any way to less this code? var tl = new TimelineMax({delay: 1}), visible = 1, hidden = 0, aveDur = 1; tl.to("#txt1", aveDur, {alpha: visible}) .to("#txt1", aveDur, {alpha: hidden, delay: 1}) .to("#txt2", aveDur, {alpha: visible}) .to("#txt2", aveDur, {alpha: hidden, delay: 1}) .to("#txt3", aveDur, {alpha: visible}) .to("#txt3", aveDur, {alpha: hidden, delay: 1}) Any suggestions are welcome!
  22. WarenGonzaga
    Hello buddy! If you're using TimelineMax or TimelineLite and you want add little delay or similar to pause you can use this simple trick. var tl = new TimelineMax(); tl.to("#object", 1, {alpha: 1}) .to("#object", 1, {alpha: 0, delay: 1}); //this will add 1 second delay before alpha 0 Hope it helps!
  23. WarenGonzaga
    Dipscom thanks! for your suggestion! I really appreciate it!
  24. WarenGonzaga
    oh I didn't notice that! thanks @Dipscom! You're awesome!
  25. WarenGonzaga
    Hi @jonathan! I got it now! Thanks for the Idea here's the solution! function swing() { TweenMax.set("#object", {transformOrigin: "center top"}); TweenMax.to("#object", 0.5, {rotation: "+=10"}); TweenMax.to("#object", 0.5, {rotation: "-=20", delay: 0.5}); TweenMax.to("#object", 0.5, {rotation: "+=15", delay: 0.5 * 2}); TweenMax.to("#object", 0.5, {rotation: "-=15", delay: 0.5 * 3}); TweenMax.to("#object", 0.5, {rotation: 0, delay: 0.5 * 4}); } Here's the codepen! http://codepen.io/Waren_Gonzaga/pen/rrmXNZ
1
2
3
...
6
Page 2 of 6  
×
×
  • Create New...