Jump to content
GreenSock

erikb

does greensock handle this automatically?

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 want to make some spans in a paragraph scale up the same way the parent div would scale up.

 

Here is a demo showing the naive implementation -- notice all of the enlarged words jumble together:

http://jsbin.com/yamatuke/1

 

Before I dive into the css to accomplish this, I thought that perhaps greensock's libraries already handle this?

Link to comment
Share on other sites

Hi Erik,

 

Thanks for providing the live sample, it was very useful.

 

You definitely can do that using GSAP, please take a look at the following codepen, feel free to fork and adapt it to your scenario:

 

See the Pen sDxCh by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Thanks Rodrigo -- It is nice to see an animated version of the demo.  But what I am trying to solve is preventing the orange spans from overlapping when transformed. Instead I want to have the orange spans of text to animate to the same position as where the words are when the whole paragraph scales up.  Does greensock have code which helps compute those transformations?

Link to comment
Share on other sites

I noticed that all your spans with class c are next to each other.. couldnt you just wrap all those spans around with a p tag, and then scale the p tag like Rodrigo had described? Or will your spans with class c change position?

Link to comment
Share on other sites

The spans which will be enlarged might not all be next to each other... and the text in a given paragraph's text might be animating to different positions, or changing mid animation.  Keeping granularity at the span level is preferred.

Link to comment
Share on other sites

Have you looked into the GreenSock TextPlugin or the SplitTextPlugin ???

 

And have them do the heavy lifting for breaking apart your text for manipulation and animating.

Link to comment
Share on other sites

Mhhh, you could check if the Split Text tool can do that, all you'll need is knowing the words index position in the split array or just split that specific part of the text.

 

Other possibility would be get the offset of each element and add to it the scale amount in order to prevent overlapping, thus scale and translate the spans. The only issue is that you have to consider the previous span size for the next span's translation.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

From what I'm gathering of what you want to achieve, I think you are going to have your work cut out for you. Looks like you are going to have to scale and translate each element to avoid any overlaps, probably going to be quite complicated when dealing with lines wrapping. 

 

Certainly SplitText will save you the trouble of splitting the text and wrapping each word in div tags.

 

I almost think you'd have better luck doing something where you create NEW DOM elements for each word and place them all in containing div. Lay the containing div over the original paragraph and position each word that needs to scale so that it lines up with and covers the originals... then scale the container that contains all these new words. This way they will all scale up from the same origin and you don't need to worry about scaling and translating each one.

 

The good news is that you can split the entire paragraph using SplitText and get the top/left values for each word that you need to duplicate and place in the container.

 

Still a bit of work, but maybe a touch easier.

  • Like 1
Link to comment
Share on other sites

Yeah, if you use SplitText and set it to use position:"absolute", that'll slice everything up into absolutely-positioned <div> elements, and then you could reparent them (basically what Carl suggested) so that, for example, you could take all those orange ones and put them into their own (new) parent <div> and animate its scale. Since they're absolutely positioned, they'll stay in position as long as the parent is positioned in the same spot as their old parent which should be pretty easy (at least in theory - I haven't tested any of this). Again, one of the biggest challenges is slicing things up and calculating the absolute position for things, and SplitText can do all of that for you, so it should save you a lot of headaches. 

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