Jump to content
Search Community

Bubble effect?

pfash 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

Hello All,

I'm just learning the potential of GSAP and would greatly appreciate a resource:

 

A couple months ago I came across a comprehensive demo page somewhere that shows many transform effects that can be achieved with GSAP...You can go down the page and mouseover/click to see what that effect looks like. I've been looking but can't find that now. Anyone know where something like that is?

 

Also: I need a "bubble" effect for a bitmap. I've attached an image that approximates this: Just a slow bulging of the image from the center.

Is there a tween effect for that I can use in the same way that use the Elastic effect?:

TweenLite.defaultEase = Elastic.easeInOut;

Thanks much!

 

For some reason the image wouldn't attach. Here it is:

http://samirihhcom.ipage.com/images/bubbleDemo2.png

Link to comment
Share on other sites

Thanks Jonathan. Those are very nice...but no that's not the page. I'll keep looking but, in any case:

 

Can I create that bubble/bulge effect using GSAP?

(My final product is an <HTML5 canvas>. I've been using Animate CC + GSAP very successfully thus far.)

Link to comment
Share on other sites

To create the bubble effect you referenced, it'd require literally distorting/remapping all the pixels which isn't really the job of an animation engine, so no - it's not something GSAP can do for you, but I'm confident Pixi.js would do it. I'm not aware of anything in CreateJS that'd do it, but I'm not terribly familiar with it anyway so I might be missing something. I wish I had a better answer for you. 

Link to comment
Share on other sites

I'd take a look at PIXI.js as Jack suggested. The available filters will take care of this for you quite easily.

 

http://www.pixijs.com/

https://pixijs.github.io/examples/#/filters/displacement-map.js

http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

http://www.goodboydigital.com/pixijs/colorMatrix/

 

Good luck with your project and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Little late getting here, but you'll definitely need something like Pixi to do the bubble effect. And it's not too hard. I actually showed Jack and PointC a bubble animation a couple of weeks ago. All you need is a displacement map, like the one I'm using here...

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/displacementmap.png

 

It won't be visible, but position it wherever you want, and then animate the scale value on the filter. Here's the demo...

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

 

That demo is using the Pixi plugin discussed here.

https://greensock.com/forums/topic/16263-staggerto-on-master-timeline-with-nested-tweenmax/?p=71686

 

At the moment, it doesn't do anything special. It just makes tweening Pixi objects easier because they are usually points, with an x and y value, requiring separate tweens for stuff like scale.

 

To get started with Pixi, you should go through their demos...

http://pixijs.github.io/examples/#/basics/basic.js

 

And this guide by kittykatattack

https://github.com/kittykatattack/learningPixi

 

And if you want to use AnimateCC, here's an extension to publish to Pixi instead of Easel.

https://creative.adobe.com/addons/products/14345#.WTZg42grKUl

 

.

  • Like 2
Link to comment
Share on other sites

I was saving the best for last. I was actually looking for a way to do bulge and pinch before your question came up, and have been working on a shader. A shader is a small program that you run on the GPU, and is the magic behind all the filters in Pixi.

 

How''s this for a bubble effect? 

 

VJZavsz.png

 

 

 

Check it out! If you want, I can separate that filter out into a separate file for you.

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

 

.

 

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