Jump to content
Search Community

Plus sign preloader challenge!

neuhaus3000 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi neuhaus3000 :)

 

Do you have a specific GSAP related problem building that or are you just looking for general advice on how to get started? 

 

If you're looking for preloader examples, CodePen is loaded with them:

See the Pen by search (@search) on CodePen

 

We do try to keep the forum focused on GSAP assistance so if there is something specific with which you need help, please let us know. If you can get something started and supply us with a CodePen, I'm certain we can help you through any difficulties.

 

For more info about creating a CodePen, please visit Carl's blog post.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...