Jump to content
Search Community

Stretchy/Squishy Line Animation

callmegoon 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’m trying to create a similar animation that you can see here (http://springsummer.dk/) when you hover over some of their work (maybe halfway down the page) — a line comes in and up and then kind of squishes to the right height.

 

I recreated this effect in a simple code pen that can be seen below using just css animations.

See the Pen EQRMjG. by callmegoon (@callmegoon) on CodePen

 

 

However, in my testing, I came to learn that Safari does not support the negative stroke-dashoffset that I’m using in the animation.

 

Soooo, I’m thinking a gsap/js solution may be my savior, but I'm struggling to find a solution.  Where I'm struggling most is the part at the end where the bottom/back of the line comes up a bit - it's as if the line the line was pulled/stretched, then snaps back into place from the back.  I haven't found anything that let's me control the back of the line in that way.  

 

I can mess around with a solution if anyone can point me in the right direction — I'll owe you a ? 

 

Thanks!

Link to comment
Share on other sites

Hi @callmegoon :)

 

Welcome to the forum.

 

If I understand your question correctly, I think you'll find the drawSVG plugin most helpful. Here's a fork of your pen:

 

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

Is that what you needed?

 

Here's some more info about DrawSVG:

https://greensock.com/docs/Plugins/DrawSVGPlugin

 

DrawSVG is a Club GreenSock bonus plugin. (many others included too) Here's some info about the club:

https://greensock.com/club

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Nice job, @PointC

 

I definitely like the DrawSVG option. And here's another approach that doesn't use any SVG - instead, it uses regular <div> elements that are skewed (animating transforms might be a tad faster though I haven't tested in this case). Simply add a ".hover" class to any element in this demo, and it'll get one of these animated lines to the left. You can mess with the angle and margins and timing if you want. Works fine no matter how quickly you roll over/off things...

See the Pen aqjdJZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

  • Like 2
Link to comment
Share on other sites

10 hours ago, callmegoon said:

I'm still seeing some weird Safari issues when the line reverses

 

That is a really odd Safari rendering bug (unrelated to GSAP). One way to get around it is to just slightly animate one of the coordinates of the points in the line which would be unnoticeable to users, but it forces the browser to re-render things, like this: 

 

See the Pen MQqwdo?editors=0010 by anon (@anon) on CodePen

 

In that demo, I just added: 

attr:{x2:"+=0.01"}

 

Seems to resolve things in Safari for me. 

 

But it may be a non-issue if you just use that regular <div> solution I offered. I'm not saying that's "better" at all - just different. 

 

Happy tweening!

 

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