Lynx

I suspect an actual graphic won't stroke along a path very well !

Hi, are there any examples of stroking a curve along a bezier / path using an image, say for example to create a vine ?

Clipping masks are useless with all current browsers, clipping paths may work, depends if there are browser compatibility problems, I have to test again.

Suppose you paint a circular paint stroke, you have a solid circular circle that looks as if it's been painted, this can be a SVG image or bitmap, now if this circular paint stroke was painted, what if it was erased or reversed, that is the effect I'm after ?

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

Ihatetomatoes - what about multiple lines or lines that swirl ?

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.

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 ?

You mean HTML5 canvas ? I don't want to do anything that requires a plugin, as in webgl. What is the reference to SVG ?

If I wanted to create an effect where as lines or swirls were drawn on the screen, since I'm not familiar with canvas, SVG could do this, hrm trying to wrap my head around this ?

Can GSAP do warp effects as, basically the same as this; https://youtu.be/G6pq0vGfwwU

Sorry for the delay, I'm having a bit of a struggle making up my mind. The image starts as a solid circle as it rotates, it breaks up, similar to a paint stroke.

I can't make up my mind over an animated effect, without showing code. I want to create an effect in which a swirl fades as it swirls away to almost nothing, if an image would help, I can supply; the exception is I want a mask to play a role in how it appears to rotate away to nothing, sorta like a painterly effect. I would greatly appreciate if someone can show me a very rough idea mentioned, to see wheather that is the direction I want to go if possible ?

I have a few questions, considering I haven't touched GSAP in a while. As far as I'm aware, GSAP can do bluring effects, as well as animate objects/images on an arc or circular based motion. Can it take an image and set the pivot based on the page layout; for example, suppose I have a circle, I want the circle to rotate around but I want the pivot at a specific point on the page, I assume I have to get the coordinates then tell GSAP where to place the pivot so the circle rotates smoothly ? Is it also possible when a page is scrolled vertically, if the circle was broken up into segments, when the circle and it's segments become out of view, they disappear, this maybe more or less CSS, not quite sure, typically I see this type of effect whereas when the page scrolls vertically, the next page, something, in this example; opens up, pops up, or what have you, you get the idea. I plan on having overlapping, transparent images that make up a larger image that rotate to open up, when the page is scrolled vertically, whether by mobile or desktop. I'm assuming there will be alot of tweening ?

Can GreenSock make animated ribbon effects, for example; ribbon wrapping around a pole ?

I have the SVG image and I want the SVG image to come together to form a shape, or look as if it's forming a shape !

I hope this is understandable I need to make an effect where as I have an particles, each particles is represented by an SVG image, as the particles come together they form a SVG image/container of whatever that container, contained (images, text etc).

This thread gave me an idea I could do with video and GSAP, crazy cool stuff

I made progress, slowly but surely

ARghh I keep mixing things up, arghh Although my element is not transforming in perspective ?

(".element",5.4,{transform:perspective:300,onStart:report, data:"tween six"}); What have I done wrong with the above code for perspective ? Adding PX to perspective doesn't solve the problem as I was hoping ?

{boxShadow:"35px,45px,56px,#FF5050"} Correct, no, I'm not seeing my red dropshadow, but I'm not getting any errors either

I want to animte drop shadow by the syntax is not working; {box-shadow:10px,10px,5px,"#888888"}); ?

Awh ! Now it works, I thought I had to change the object from "this" to the name of my variable. I assume regardless how many tweens I have the function reads them one after the other ?

I use FireFox which gives me an undefined error ? [JsFiddle Code]