Jump to content
Search Community

Noob Needs serious help

Guest jmclemoreZynga
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

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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.

:)

  • Like 1
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...