Jump to content
Search Community

Rotating SVG as a loading icon

Stevej test

By Stevej
in GSAP

Moderator Tag
 Share

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

ZachSaucier test

ZachSaucier

Posted
Posted

Hey Steve,

 

To create a loading animation, you should put the relevant Javascript for the loading animation only inside of the <head>. Put the rest of the Javascript at the bottom of the <body> where it usually goes and include a small snippet to remove the loading animation on window.onload()

 

Using this approach you should be able to do what you want. If you post an example CodePen then perhaps we can help you implement it further.

  • Like 2
Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Hello Stevej, and Welcome to the GreenSock forum!

 

Here is just a simple approach like ZachSaucier advised above. This codepen just shows that simple concept of loading gif preloader and then removing after load.

 

See the Pen jbdgPg by jonathan (@jonathan) on CodePen

 

Also are you looking to also build a loading animation with GSAP and not just understand the loading of preloader icon?

 

I was just using a animated gif, but you could create an animation with GSAP and use that instead. But the same loading and preloader icon concept is the same.

 

It uses the GSAP delayedCall() instead of setTimeout()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
    //do stuff
}

If you can, please setup a codepen demo so we can see your GSAP code to better help you. Here is a video by GreenSock on how to create a codepen demo example.

 

 

:)

  • Like 1
Link to comment
Share on other sites
  • 4 weeks later...
Stevej test

Stevej

Posted
  • Author
Posted

Hi, I have created a codepen example, the url is

See the Pen zrgNqb?editors=1111 by stevehj (@stevehj) on CodePen

.

For some reason the svg cannot be found and does not rotate. The code works, running it locally or on the server.

 

The SVG rotates while the image is loading. Once the page has loaded the $(windows).load fades out the

pageloader div containing the SVG logo.

 

The problem is the SVG does not rotate consistently but slows at the end of each

rotation. I want the SVG logo to rotate at the same speed until the page loads.

 

Thanks for any help.

 

Steve

  • Like 1
Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Thanks for the demo. Very helpful.

 

A few notes about using CodePen

 

  • you don't need the body and html tags. just paste the contents of the body into the HTML panel
  • place css in the css panel
  • load externally hosted js files by clicking on the js gear in the js panel
  • paste  the source of your custom js (js/greensock.js) in the js panel 

This way we can see and edit all the different parts.

 

I'm puzzled why your svg wasn't loading. I tested the url and the svg definitely is there. very strange.

 

I'm pretty sure the reason why the svg wasn't spinning at a constant rate is due to the ease. All tweens have a default ease of Power1.easeOut (which makes animations slow down when they end). To get around this you would just add a Linear ease.

 

Please see:

http://codepen.io/GreenSock/pen/pgMeLv

 

I chopped up some of your css when trying to troubleshoot the svg (its no longer centered), but you should see it spinning at a constant rate.

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

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