Bar will contract from left to right on the next animation

[Louienator]

Hi here's my code on what i want to achieve.. 

https://jsfiddle.net/b12w4dkL/76/

[GSAP Helper]

We'd love to help, but vague details are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

[Rodrigo]

Hi,

 

Transform origin is only useful when you're doing some specific transform on an element, so animating the width property is not affected by the transform origin property:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

 

Here is one way to achieve that using scale:

See the Pen OJqjzZO by GreenSock (@GreenSock) on CodePen

 

Another option is to use Clip Path:

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Hi, here's a demo of my code, where when you hover the text a line will expand from left to right.. now the i want the line where the mouseleave method will fire, the line will contract to width 0% from left to right again. and also the animation will repeat once the mouseenter method will trigger or once the text will be hovered.

https://jsfiddle.net/0uqhdwpb/31/

 

[Louienator]

14 minutes ago, Rodrigo said:

Hi,

 

Transform origin is only useful when you're doing some specific transform on an element, so animating the width property is not affected by the transform origin property:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

 

Here is one way to achieve that using scale:

 

See the Pen

See the Pen OJqjzZO by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

Another option is to use Clip Path:

 

Hopefully this helps.

Happy Tweening!

hi @Rodrigo,

 

Thank you for this. i've followed your solution and, my animation didn't animate again when my cursor goes back to the text


https://jsfiddle.net/0uqhdwpb/52/

 

[Rodrigo]

Hi,

 

This thread and specially the posts by @Carl and @OSUblake should help:

 

Happy Tweening!

[Louienator]

Hi @Rodrigo, I think i got it. but the problem is that, whenever i hover back, the animation is not playing back. here's my fiddle

https://jsfiddle.net/hus6jbtf/50/

 

 

[Rodrigo]

Hi,

 

Just use restart instead of play:

$('.box-btn', this).mouseenter(() => {
  this.animation.invalidate();
  this.animation.restart();
});


$('.box-btn', this).mouseleave(() => {
  this.animation2.invalidate();
  this.animation2.restart();
});

Play will unpause the GSAP instance, but after playing before your animation's playhead is already at the end point. Let's say that you have a 1 second animation that's paused, then you play that animation which completes. After is completed your animation's playhead is at 1 second. If you call the play method again the playhead is still sitting at 1 second, see how it works? Restart takes the animation's playhead back to 0 seconds and plays it complete again. Of course you can also use animation.play(0) as well:

https://gsap.com/docs/v3/GSAP/Tween/play()

 

Hopefully this clear things up.

Happy Tweening!

[PointC]

I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect. It's quite simple so just a tiny bit of CSS is all it takes to make it work. Just my two cents. Happy tweening. 

See the Pen ZEPJRKG by PointC (@PointC) on CodePen

[Louienator]

12 minutes ago, PointC said:

I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect. It's quite simple so just a tiny bit of CSS is all it takes. to make it work. Just my two cents. Happy tweening. 

 

 

Nice approach @PointC.. Thanks for this tip.. Will try this out and have an experiment.. I didn't know that it's achievable with just pure css.. Yey!

 

Thanks

[Rodrigo]

2 hours ago, PointC said:

I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect

[PointC]

I'll drop off my Mod badge at HR and clean out my locker.

 

[mvaneijgen]

I had to look twice and thought @PointC really did it! But we don't even have a mod badge anymore 🤣