Jump to content
GreenSock

neuhaus3000

Plus sign preloader challenge!

Recommended Posts

Hello everyone!

 

I would like to create a preloader with a plus sign that :

- fades in;

- the plus sign turns (rotate) clockwise 90 degrees for each 25% downloaded;

- after 100%, fades out;

 

Any ideas will be appreciated...

 

Thanks!!!

 

neuhaus3000

Link to comment
Share on other sites

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