Jump to content
Search Community

WarenGonzaga

Members

  • Posts

    127

  • Joined

  • Last visited

 Content Type 

Posts posted by WarenGonzaga

    Plus sign preloader challenge!

    in GSAP

    Posted

    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.,..

     

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

     

    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});
}
    • Like 4

    Resize Browser, change height, width and Ypos, Responisve

    in GSAP

    Posted

    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 -->

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

     

    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

    • Like 1

    Tweens get blocked if you have a repeat:-1 tween before within a timeline?

    in GSAP

    Posted

    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

    • Like 1

    Moving and blinking animation

    in GSAP

    Posted

    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: 

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

     

     

    GSAP Enthusiast
    Waren

    • Like 2

    Multi Callback Function to call different animation.

    in GSAP

    Posted

    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.

    Multi Callback Function to call different animation.

    in GSAP

    Posted

    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!

    Tips for a advanced timeline in GreenSock

    in GSAP

    Posted

    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

    • Like 1

    Tips for a advanced timeline in GreenSock

    in GSAP

    Posted

    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

    • Like 1

    Give smoothness to this animation

    in GSAP

    Posted

    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: 

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

     

    Hope it helps!

    GSAP Enthusiast!

    Waren

    • Like 1

    Easiest Way to Less the code for GSAP?

    in GSAP

    Posted

    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!

    problems with addPause

    in GSAP

    Posted

    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!

    Need Help in Rotation Animation! - AnimateCSSPlugin.js

    in GSAP

    Posted

    Hello Warren

     

    right off the bat I you can first adjust the transform-origin so it is center left .. or 50℅ 0℅

     

    the use rotation property which is the same as rotationZ in GSAP to swing the element like the desired effect you want to match.

     

    I will look into this more when I'm at my computer ;)

     

    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! 

1
2
3
...
5
Page 2 of 5  
×
×
  • Create New...