Jump to content
Search Community

Removing prior tweenend attribute

LilaQ test
Moderator Tag

Go to solution Solved by Carl,

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

Hi guys,

 

sorry for creating to many topics at the moment - it's just I know that I get the best help around here and I'm really trying to get some work done at the moment.

 

My question:

 

I have a <div> which is displayed as an inline-block, thus having a variable width (only wrapping around its content).

At one point I want to tween the div to 100% width of its parent element (childsplay with GSAP).

But after that, I want to remove the 100% value and tween it back to its original width and behaviour.

 

How can I accomplish that?

 

Thanks in advance, also for your patience with these, I'm pretty sure, easy questions.

 

Best regards,

Link to comment
Share on other sites

Hi,

 

I believe this is more of a CSS question than anything, but the solution is actually very simple.

 

You can create a Tween that animates the element's width to 100% and then reverse that instance, like this:

var element = document.getElementById("element"),
    button =  document.getElementById("toggle-button"),
    t = TweenLite.to(element, 1, {width:"100%", paused:true}).reversed(true);

button.onclick = function(){
  t.reversed() ? t.play() : t.reverse();
};

You can see a live sample here:

 

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

 

Rodrigo.

Link to comment
Share on other sites

Actually nothing fancy at all.

 

See the Pen dPMjyg by LilaQ (@LilaQ) on CodePen

 

This codepen here shows what I'm trying to accomplish (but with tweening back to the original width). Like you said, the reversing of a Timeline would work, I just want to additionally flip all the characters around 360 on the way back to its original position with the SplitTextPlugin.

 

Edit:

 

Sorry, the pen was not saved. It is now.

 

Edit the 2nd:

 

Of course if someone has an idea on how to accomplish my idea in any other way, I'm all ears.

A have a div with a fixed with, a menu item inside (just text) on the left side of it. On hovering with the mouse, the text shall move to the right border of the parent div (at the moment accomplished with tweening the width to 100% and text-align: right), when the mouse leaves the object the text shall tween back to the left side of the parent div (with a little rotation of the characters).

Link to comment
Share on other sites

Hi,

 

This was pretty fun actually. The button has been removed and the animation happens on mouse enter/leave using jquery's hover() method. Additionally I created a SplitText instance and a timeline to animate the characters using a staggerTo() instance. The SplitText is animated only if the width tween has been completed and when that tween is being reversed, otherwise nothing happens.

 

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

  • Like 4
Link to comment
Share on other sites

Hi,

 

As far as I know the issue with tweening to auto is how the engine actually works. You'll see auto is a string that doesn't represents any numerical value, while "100%" is also a string but it does represents a numerical value which can be used by the CSS Plugin.

 

Under the hood GSAP takes the element you want to animate and stores the element's current value and the tween's target value and then tweens the starting value to the final value, while the CSS Plugin updates the element's style on every tick. So if you pass "auto" there isn't an actual value at all so there isn't much GSAP can actually do. Hopefully this makes things a bit more clear.

 

Finally although it looks like a lot of code, you could loop through your menu elements and create an instance for each and pay/reverse using the hover() method. The point with all the code is that you wanted to animate the text just while reversing the width animation, not in both directions. The last scenario is quite simpler actually and there's a lot of samples around. Yours on the other hand requires a specific condition for the text animation and therefore requires a bit more code than usual, but as you can see is not terribly complicated.

  • Like 1
Link to comment
Share on other sites

Hi,

 

As far as I know the issue with tweening to auto is how the engine actually works. You'll see auto is a string that doesn't represents any numerical value, while "100%" is also a string but it does represents a numerical value which can be used by the CSS Plugin...

 

That's what crossed my mind, too.

 

Well, thing is, there WAS a solution - as you said, not terribly complicated - so, all is good :)

Link to comment
Share on other sites

Okay, sorry I have to mark it unanswered.

 

The problem is following, if I try to add a padding as the effect for the tween back, it won't work, the inline-block div get's an inline width, which causes the characters to break down to the next line.

 

I will make a CodePen to demonstrate right now.

 

Edit:

 

See the Pen wBGEOx by LilaQ (@LilaQ) on CodePen

 

Note how the "child" div has an inline width of ~15% after the Tween. Any way to make the characters not break in the next lines until their padding 30px -> padding 0px is done?

Link to comment
Share on other sites

Hi,

 

This basically has to do with how much each instance lasts. When you add repeat:1 to the timeline that animates the text, basically that timeline will be twice as long as the width instance, because it goes forward and backwards, while the width tween goes just backwards.

 

The easy solution is to use totalDuration() instead of duration, like this:

// totalDuration() considers the repeats of the TimelineMax instance
// like this the duration is adjusted properly and in sync
splitTween.totalDuration( t.duration() );
  • Like 1
Link to comment
Share on other sites

This is actually intentional, I want the characters to be spread apart through the padding, until the first character hits the left border (which is the end of the width tween), and then tween back to padding 0.

 

It's supposed to look like the caracters are behaving like connected with springs.

 

Any ideas on how to achieve this?

 

I had a few ideas while trying to sleep, like:

 

  • creating a clone of the div (with display:none), including the characters with a set padding of 20px
  • measure the width of that div (is that even possible when not displayed?)
  • then tween to original div to that measured width on mouseleaves (which then should be enough to not break lines)
  • once the padding-tween is done, remove the measured width

Now that I think about it again, this won't work b/c I have a text-align: right and this would just snap the element back at the end... :(

 

 

However, ANY help and ideas would be greatly appreciated.

 

Thanks in advance!

Link to comment
Share on other sites

Hi,

 

Yep, that's a bit more complicated, but your idea is pretty good actually. Create another DOM element and get the element's width and instead of reversing the previous tween, animate the width to that amount,  then when that tween is completed use clearProps:"width", otherwise the width will not change back to the original. Then you can reverse the split text tween.

 

Unfortunately I don't have enough time to tackle this right now, but hopefully there's enough already so you can get started.

  • Like 1
Link to comment
Share on other sites

  • Solution

First I want to commend Rodrigo for his excellent advice. I struggled to keep up with the changes.

 

Second, this is quite a challenging effect and I really don't think there is a good way to achieve it by relying on the normal behavior of basic css layout properties like display:inline-block and width:auto.

Tweening back to a width of auto (or whatever the previous width was) while monkeying with the padding of the characters is going to be very problematic (as evidenced above).

 

Since you guys came up a really nice way to deal with the hover controls, I decided to just focus on getting the animation nice in a single timeline.

 

Take a peak here: http://codepen.io/GreenSock/pen/LENoXQ/

 

I'm not going for a neatest code award, just a quick prototype. 

The basic idea is that the width of the green div is dynamically adjusted based on the offset().left (and some padding) of the last character in the split.chars array.

When the text moves to the right I'm just tweening the x of menuHolder, on the way back I tween menuHolder back to where it came from (moving the whole word) but I create unique tweens to adjust the x position of each character (for the spring effect).

 

I prefer to tween the x as you get the smoothness from sub-pixel rendering. Padding values are forced to whole pixels. 

 

Also, I think this could be improved. Constantly forcing the width of the green div to change I'm sure can be replaced by adding a clever psuedo-element to the last character in the split.chars that is a super wide rectangle that just gets offset horizontally to appear as if it is the background of the entire word. This might involve some z-index shifting to make sure the prior characters sit on top of this fake background... but I'm sure its entirely possible. The idea is that as the last character moves... a fake background moves with it. 

  • Like 5
Link to comment
Share on other sites

First of all, sorry I'm replying so late.

 

@Carl that looks great and I really love how you worked this out. I will have a deeper look at this and learn from it.

 

Thank you very much for the time and effort you guys put into other peoples issues and questions! :)

 

Best wishes,

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