Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest jmclemoreZynga

Noob Needs serious help

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

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

Share this post


Link to post
Share on other sites

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.

:)

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks, but it's just a blank screen.

Share this post


Link to post
Share on other sites

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.

:)

  • Like 2

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×