Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
raizo

Ink transition with gsap

Recommended Posts

Hi guys,

 

I want to know if its possible to achieve animation like this with morphSVG? (see the link below)

https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa.

 

Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.

Link to post
Share on other sites

That looks more like image morphing. There might be a way to do that with SVG filters, but is probably something better suited for canvas/WebGL. Reminds me of this demo using GSAP and PixiJS.

 

See the Pen qZejVP by flexmotion (@flexmotion) on CodePen

 

  • Like 5
Link to post
Share on other sites

That is a nice effect which is similar to the animation I want to achieve, except the animation wil trigger as an page transition and not on scroll. I will be using PixiJS  to render the textures and Gsap for the animation.

Link to post
Share on other sites

Hi again,

 

So I found this little tutorial, http://www.instrument.com/articles/tedx-making-wonderland.

And I got it working.

 

But I want to fade in/out the dissolve effect into a white page, and if it possible to add an effect so it looks like you getting sucked in somewhere, does anyone know or have a idea how to do this?

 

like this codepen: 

See the Pen mqxRvZ?editors=1010 by spaarwt001 (@spaarwt001) on CodePen

 

  • Like 1
Link to post
Share on other sites

Hi @raizo

 

The demo in that tutorial is really neat. Is the source code posted somewhere? They mentioned GSAP, but didn't show how they were using it. I'm sure other people would like to see how they used it.

 

I'm pretty sure everything you're trying to do could be done by just using a combination of different filters. You can play around with all the filters here.

http://pixijs.io/pixi-filters/tools/demo/

 

And here's the repo for the filters.

https://github.com/pixijs/pixi-filters

 

For fading to white, it seems like you could just set your background to white, or maybe do some type of blending with a white sprite behind it.

 

Here's an easy way to make a sprite of any of any color or size. Of course you wouldn't need to set the tint as the texture is already white. Just showing how. And changing the width and height of a sprite are actually just scaling it.

 

var sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.tint = 0xff0000; 
sprite.width = 800;
sprite.height = 600; 

 

There's a lot of possibilities. Why don't you go look at those filters, and then come back if you have any questions.

 

And in case you didn't know, GSAP has a plugin for PixiJS.

 

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

 

  • Like 3
Link to post
Share on other sites

I am a little stuck right now, and due to some private information I can't share the animation I am making. 

 

I am also a very novice in Javascript, maybe you can provide me with a little help, to put me on the right path.

Link to post
Share on other sites

What do you need help with? You don't have to show your exact animation or assets. Or send me a PM if don't want to post something.

  • Like 1
Link to post
Share on other sites

I saw your question and by the way is the same concept of a project that was creating, using really the methods that @OSUblake mentioned.
There are some adjustments to be fixed, but if you have not gotten the result, it can help you.

Ps .: I used a demo video of ShutterStock because of the fluids, but you can do with images in a spriteAnimation:

 

See the Pen WdyYNN?editors=0110 by Noturnoo (@Noturnoo) on CodePen

 

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

Really well done mate,

 

this was exactly what I was looking for. I achieved the same effect but instead of using pixi.JS is switched over to animation spritesheet and animated it with steps() using the GSAP library.

 

Thanks for sharing!

  • Like 1
Link to post
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.

×