Jump to content
Search Community

Can someone point out why this doesn't work?

vdubplate test
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

I decided to try this out today. I was able to get stuff tweening around when I use the css plugin but I can't get the first example to work.

 

var photo = document.getElementById("#box");

TweenLite.to(box, 1.5, {width:200});

 

I attached a very basic example. Can someone tell me what I did wrong?

I had some developers at my job take a stab with no luck.

Link to comment
Share on other sites

Thanks guys, I sent over the code with the wrong variable but I had tried it with the box variable set up correctly and was still a no go. So I have to use the CSS plugin to change the size? I did have that commented out in my code. That worked fine. The example in the documentation wasn't workign out for me though which would have been:

 

var photo = document.getElementById("photo");

TweenLite.to(photo, 1.5, {width:100});

 

Is the first exaple in the getting started guide.

Link to comment
Share on other sites

I got this to work:

 

var photo = document.getElementById("box");

TweenLite.to(photo, 1.5, {css:{width:"200px"}});

 

The documentation mentioned that this would work but had no luck:

 

var photo = document.getElementById("photo");

TweenLite.to(photo, 1.5, {width:200});

Link to comment
Share on other sites

I think you are missing that in the starter guide it mentions that photo is an Id placed on an img tag.

 

Img tags have a width property/attribute

Div tags do not. a divs width is set viia CSS.

 

Does that help?

 

 

Link to comment
Share on other sites

I just ran into this same issue. In the TweenLite section of the documentation that comes with the lib it just says this:

 

USAGE

The most common type of tween is a to() tween which allows you to define the destination values:

TweenLite.to(document.getElementById("photo"), 2, {width:200, height:150});

The above code will tween the width and height properties of the DOM element with an id of "photo" from whatever the current values are to 200 and 150 respectively over the course of 2 seconds. Notice the x and y values are defined inside a generic object (between curly braces). Put as many properties there as you want.

I searched the page and there's no mention of 'img' or 'image'

Link to comment
Share on other sites

A div is not a DOM element in the way that it's width is always controlled by CSS.. So the docs are right.

 

From what I understand, which isn't much at this point. They go into a lot more detail in the video tutorial that goes along with that doc.

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...