Jump to content
Search Community

Warp

Lynx 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

Hi Lynx  :)

 

GSAP can animate any property of any object , you should to know html , css , svg , canvas and webgl limitations / techniques .... in this case you just have one way to go : Canvas technology .... certainly you can use GSAP as animation engine .

  • Like 1
Link to comment
Share on other sites

With enough effort, you could probably do this in SVG but it won't be easy and I don't have time to build it for you. For the record, WebGL isn't a plugin. It's an open standard that's in most modern web browsers now. Canvas too. I suspect those would perform much better than SVG for the effect you're after. 

Link to comment
Share on other sites

Here's how to do it. But as you can see from the code, it's not going to be an easy thing to implement.

 

See the Pen bpgBH by cx20 (@cx20) on CodePen

The noise need to be finer, you are right on target ? :)

 

Implementing this will be a pain ? There will be an image, ontop of the main image a clipped or masked image, since CSS masking is not reliable, the clipped image I hope could be clipped using GSAP ?

Link to comment
Share on other sites

Blake was just providing an example to show that it is technically possible.

GSAP doesn't do any clipping or masking. For that you are at the mercy of CSS, SVG or whatever rendering layer you chose.

 

I would recommend you look into Pixi.js as it has an incredible amount of filters, is extremely fast and works great with GSAP

 

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

http://www.pixijs.com/examples/

 

I think the amount of hassle / pain is going to be based on how familiar you are with the technologies you choose.

 

As others have said, this isn't the type of thing we can just build for you, but we will do our best to get in the right direction.

If you have questions related directly to the GSSP API, just let us know.

  • Like 1
Link to comment
Share on other sites

I'm not familiar with canvas, but as mentioned blake example is perfect, as he said implementing it won't be easy, I wouldn't mind if he can elaberate on this ? It's a technique I want to do for a page, despite not having the knowledge of some of the technologies. I want to know what hiccups I could encounter that will make adding it to a page more pain then it's worth despite how little or how much I know about the technologies. :)

Link to comment
Share on other sites

Could you be more specific with your question? Please keep in mind that these free forums are dedicated to answering specific GSAP-related questions. I really wish we could provide general consulting and help you build various effects for free, but we simply don't have the resources for that. If Blake wants to chime in and offer some direction, great - he is more than kind with his time here in these forums (something for which we're grateful). I just want to help guide expectations about these forums, that's all. So if you've got a GSAP-specific question, we'd love to help. 

  • Like 1
Link to comment
Share on other sites

I know it's not a direct GSAP quesiton, I was expecting someone to bring this up; I'm playing with options at the moment, as you said, if Blake wants to continue to, I'll use your word :) chime in, I'll wait to see :)

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...