Timeline advice

[RhinoRudi]

Hi All,

 

My first post, I have not been lurking too long. 

 

A simple fade in animation of the company logo I work for. I am basically asking if my code is correct and anyways to make it better, if not. Any advice on better ways to do this. 

 

If I wanted to put this on a live site, how would I go about it? The CodePen js to an external file? The Greensock library loaded in the head or at end of body. Just getting back into web coding (HTML & CSS is mostly what I know, not much JS).

 

I have another Illustrator fill with the eye blinking, 3 AI sub-layers showing the 3 open to closed states. I will try to add that to this once I am comfortable with the current workflow.

 

Thanks,

Randy

See the Pen RawPYd by RhinoRudi (@RhinoRudi) on CodePen

[Dipscom]

Hi ,

 

Nice start. And welcome! To my eyes, there is nothing wrong with your JS at all.

 

My comments would be:

Do add a label since you seem to be referring to one:

tl.add("Start")

I would make the elements invisible via CSS using 'display: hidden' rather than the .set(autoAlpha:0) simply because you would not get the little flicker of the elements showing and then being hidden for that split second that it takes for the JS to load.

 

I don't think you need a Elastic.easeOut ease. It does not seem to be very noticeable.

 

As for your other questions:

To put it on a live site, you can link the GSAP library in the head with the CDN link provided in the GreenSock's homepage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

And have the JS code in an external file (for better file management, rather than in the body). But if you do that, you need to make sure the JS waits for the document and page load events as Jonathan is always pointing out:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {


  // wait until window, stylesheets, images, links, and other media assets are loaded
  window.onload = function() {


  // All ready, start!
  
  };
});

[RhinoRudi]

Thanks  Dipscom, not sure how to link to someone here. I mostly use Discourse at work, not that it matters.

 

I was looking at labels in the timeline videos on the Greenock site. thanks.

 

I was looking at thread here on opacity, this past weekend, and for some reason I used that option. I think it was to start to get used to some GSAP attributes. The css way makes sense, thanks.

 

The easing out just got left in from something else. Duh

 

So the last bit of JS would go at the start of my Codeine JS? And that would go to an external file, loaded in the head, correct?

 

Thanks, off for a bit and then some more practise later.

[Carl]

the reason the animation wasn't working is because you had  in your css:

 

display:hidden;

 

but it should have been 

 

visibility:hidden;

 

It's an easy mistake to make.

 

see the fixed version here:

 

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

 

I prefer to load TweenMax (and all external js) right before the closing body tag.

Look at the demo and find the "export" button in the lower right-hand corner. 

You can download a zip that you can inspect locally. It uses a solid way for organizing all the files.

[Dipscom]

Ops...

 

Yes, VISIBILITY:hidden, not DISPLAY. My bad, didn't spot the error.

 

Shame on my, giving incorrect information to people.

[RhinoRudi]

Thanks, just getting back. Looking now and changing display to visibility . That's OK Dipscom, we all do it.

 

the reason the animation wasn't working is because you had  in your css:

 

display:hidden;

 

but it should have been 

 

visibility:hidden;

 

It's an easy mistake to make.

 

see the fixed version here:

 

See the Pen ZWYbEK by GreenSock (@GreenSock) on CodePen

 

I prefer to load TweenMax (and all external js) right before the closing body tag.

Look at the demo and find the "export" button in the lower right-hand corner. 

You can download a zip that you can inspect locally. It uses a solid way for organizing all the files.

 

Thanks Carl, I know I will be enjoying this. Waiting for this coming Friday, pay day. That means I can get a membership, yes!