Jump to content
GreenSock

harp30

Svg blob transition effect

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

Not sure which effect you are referring to. If you meant the blobs for loading animation, you can achieve that by using blur and contrast filters, take a look at following video by Chris Gannon.

 

 

If you meant the logo animation, that can be achieved by DrawSVGPlugin, take a look at demo by @PointC in following thread.

 

 

Apart from that I don't really see any animation on the site.

 

  • Like 4
Link to comment
Share on other sites

Hi @harp30,

 

Probably you are looking for the scroll animation.

Not serious, just a little gimmick:

 

See the Pen vaPjOL by mikeK (@mikeK) on CodePen

 

Maybe it will put you on the right track.

 

Happy tweening ...
Mikel

 

P.S.: @Sahil , thanks for pointing out the video from @chrisgannon.
Awesome type. Very creative ...

 

Lets cycle ...

 

 

  • Like 3
Link to comment
Share on other sites

Okay thank you @mikel and @sahil

Its a sprite sheet effect, it appears when you click home cta - logo.

 

Link to comment
Share on other sites

6 hours ago, harp30 said:

Its a sprite sheet effect

 

 

You just answered your own question. They are drawing a sequence of images on a canvas element.

 

See the Pen vpEQzY by osublake (@osublake) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Yes! Okay thank you! Going to try this out for a new project.

 

The video that was posted above by @Sahil - how do you plan out or design such interactive animations?  Using storyboards? Or is there another way?

 

Thank you.

Link to comment
Share on other sites

Quote

The video that was posted above by @Sahil - how do you plan out or design such interactive animations?  Using storyboards? Or is there another way?

 

In video, Chris mentions he uses Bodymovin to try out animations or prototype them to get approved and then recreates them using GSAP. I usually do what I am asked to do or from comes to my mind. @PointC probably has some process for planning animations.

  • Like 2
Link to comment
Share on other sites

I usually just start coding until something looks good. ;)

 

Oddly enough I start almost every project in Adobe Illustrator. Whether it's artwork from a client, stock vectors or my own creation, I like to get it all organized. Making sure everything has a proper ID and group will make any animation work go more smoothly. I try to look at each piece and think whether I'll make it move and if it should be a part of a group that may move as well. I'd rather have extra groups and IDs and not need them instead of a bunch of generic <path> elements. From there I kick out an SVG if it's a web animation or use Overlord for an After Effects project. That process allows me to quickly experiment or show clients a basic overview. I rarely storyboard unless it's a big project with character animation.

 

Happy tweening.

:)

 

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