glassbean

Simple multiple tweet issue

Recommended Posts

Hi There,

 

Finally migrating from Flash to HTML5 and am completely new to CSS & JS. I'm making some simple banners to get up to speed.

I have a problem tweening single characters of a text which are broken apart in html using span tags. In the codepen example linked, why for example does the opacity property work fine but not the scale or co-ordinate positions?

 

Thanks for you time,

 

G*

Share this post


Link to post
Share on other sites

Hi glassbean,

 

Welcome to the forums!

 

The reason your <span> tags are not moving or scaling is because you have not set a position for them - either absolute or relative. Having said that, <span> tags are a quirky beast on themselves and do not behave exactly as a <div> tag by default. You would probably have to tinker with its default settings in order to make it so. If you try to tween a <span> after adding a relative or absolute positioning to them, you might not get the results you expect. You are better off using <div> tags.

 

http://codepen.io/dipscom/pen/LNKrjZ

 

Or, better yet, you are much better of using the SplitText plugin if you are tweening text. 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the swift reply Dipscom, seems I've a lot to learn. Quick replies and good advice such as yours will speed my up my learning.

  • Like 2

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

  • Recently Browsing   0 members

    No registered users viewing this page.