Noob Needs serious help

[Guest jmclemoreZynga]

I'm SO lost. I've used TweenMax back in the Flash days and I code mobile sites. But, I can't figure out how to load images with GSAP.
Tell me where I'm getting it wrong. I have a bunch of pngs for a banner that I need to animate. I thought I could img src="whateverImg" in a div, give them an id, add some css and animate it by id in main.js w/ TweenMax.
Is the only way to import the image in the css as background: url(img/whateverImg.png)no-repeat; ?

None of the tuts seem to make this clear for a noob

Thanks,

Pulling my hair out

[PointC]

HI @jmclemoreZynga

 

Welcome to the forum.

 

You should be able to give an image an ID or class and animate it with GSAP. If you could put your question into a demo, we can take a look for you. Here's some info about that.

 

Happy tweening.

 

[Guest jmclemoreZynga]

Sure. Here's where I am. The logo, a red pitbull, never shows or animates.

See the Pen KvQxPx by jmclemore (@jmclemore) on CodePen.

See the Pen WEMKqz by anon (@anon) on CodePen.

 

[Guest jmclemoreZynga]

See the Pen KvQxPx by jmclemore (@jmclemore) on CodePen.

See the Pen WEMKqz by anon (@anon) on CodePen.

 

[PointC]

Those pens are using a background image for that div, but have no content. You'll have to set the size of that logo div if you want it to show like that. The other problem on the CodePen is you're linking to your local file directory so no image is loading. 

 

Your original question was about animating an image with scr="" so here's a fork of your pen with a sample image in it so you can see everything is working correctly. 

See the Pen OjQoVO by PointC (@PointC) on CodePen.

Hopefully that helps. Just FYI - you don't need the body, head etc. tags in the HTML panel on CodePen. That's all taken care of for you.

 

Happy tweening.

[Guest jmclemoreZynga]

Thanks, but it's just a blank screen.

[PointC]

What's a blank screen? The CodePen?

 

Something may be weird with that embed. Here, try a link instead.

 

See the Pen OjQoVO by PointC (@PointC) on CodePen.

 

Happy tweening.

[Carl]

Just jumping in. Saw PointC's pen working embedded and linked versions.

- make sure you hit the "run pen" button on the embedded ones.

[Guest jmclemoreZynga]

Still nothing. Not sure what I'm doing wrong.

See the Pen EvQeWa by jmclemore (@jmclemore) on CodePen.

 

[PointC]

Oh... you meant you had a blank screen. I thought you meant my demo was blank.

 

You're still linking to a local image. You have this on line 2

<img src="img/logo.png">

 

You'll see my image has a direct link.

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/hero.png" >

 

That is my asset account on CodePen, but you can link to your own images on your server or just some test images from another server, but you can't leave it the way you have it. That's just looking in your local img folder.

 

Make sense?

 

Happy tweening.

[Guest jmclemoreZynga]

SUCCESS! I changed the CDN link to TweenMax from TweenLite and it worked.
Weird. That's a basic tween

[Guest jmclemoreZynga]

Oh, yeah it was a totally blank screen. Not even the Codepen ui

[Guest jmclemoreZynga]

hanks SO MUCH for the help. Have a great weekend!