[animating background position buggy x-browser]

I just experienced something similar regarding 'animating the backgroundPosition property:

It did work on my test-page, where I set up only the items I am animating (some puppet-style character animations).

 

But when I put the same exact elements into the real page it stopped working.

Using standard css-syntax [ css: {"background-position": "100% 0"}  ] I could get it to work again.

 

The difference being a whole lot of other javascript (and animations, too) going on on the page.

Unfortunately I don't have the time to set up a test to see at which point the functionality breaks.

Just mentioning that there is still some backround-position voodoo going on and for now it seems that snake-case fixes this.

[Draggable snap delay]

I owe you. 

[Draggable snap delay]

I tried that but it doesn't work. The event fires, but the property 'rotation' of my Draggable is not updated anymore (and I'm using that to rotate the nested elements in the opposite direction).

I could calculate the rotation from the css transform values, but I was hoping there is an easier way.

[Draggable snap delay]

Now, if you could only tell me, why this breaks the 'onThrowUpdate' functionality...

I was able to reinstall the ease within the ThrowProps.to-Tween, but 'onThrowUpdate' does not seem to fire any more.

[Draggable snap delay]

Exactly what I was looking for!

Thank you very much!!

 

If I understand this correctly you override the ThrowPropsPlugins' Parameters by adding ±720 degrees to the end-rotation value.

I didn't know you could adress the Plugins' Paramters like that.

 

Thanks & cheers!

[Draggable snap delay]

Here's a pen I created:

See the Pen eJvQyp by ppdc (@ppdc) on CodePen

 

It pretty much does what it's supposed to, except for the one thing, that the wheel should always do 2 full rotations.

Thank you!

[Draggable snap delay]

Hi PointC, hi Jack,

 

thank you, but yes, I am already using them. Should have mentioned that.

 

I think I misstated the problem, I rather need a minimum initial speed, so that the wheel will turn at least x times before it eases to a stop.

I think it might be easier to make the wheel turn with a Tween... however I would still want to grab the initial speed of the user's drag to initiate the rotation.

Can you follow me?

 

I'll try to set up a pen.

[Draggable snap delay]

Is there an easy way to make the a Draggable snap only after some time?

I am trying to do some sort of lucky wheel, so the rotation should go on for some time and only at the end of the movement it should snap to a predefined angle.

 

Thanks!

 

Edit: minduration kind of works, but I would rather have something like a 'minspeed'.

[Image Clipping]

Why not? A little useless tween never did no harm...

 

Still kind of odd that it works now. Browser voodoo... at least white voodoo for once

[Image Clipping]

I had thought of that, but didn't try. Nice! It even works down to IE9!

 

@Jack: Did you change anything in the MorphSVGPlugin? I noticed, you don't need the dirty hack you came up with anymore...

[Image Clipping]

Some browsers just love to be fooled.

That does the trick and the explanation sounds ... sound.

 

Just sad to see that support by IE doesn't even seem to be planned, says caniuse.com.

[Image Clipping]

Hi,

 

I did play around with your new Plugin, and tried to morph a svg shape used as clippingPath on an image.

I know, support for this varies among browsers, IE being the usual spoilsport, but still... I was playing around with that recently while trying to port a flash-banner to html. The ability to animate masks is one of the few things I still miss from the Flash-days.

 

However, it kind-of works out of the box, but there seems to be a redraw issue.

Here's my pen:

See the Pen epgbXg by ppdc (@ppdc) on CodePen

 

Firefox works fine, Chrome and Safari only update the mask on the image if you force a redraw, by scrolling or resizing the frame in codepen.

 

Having said that, exceptional work, as always Mr GreenSock!

 

 

[Change Bezier Point Values midrace]

Rodrigo and Carl,

 

thank you both very much, this forum never fails to amaze me.

 

I only had a glance at your examples (it's 23:30 here), but that looks very much like the way to go!

I will dive into it tomorrow and hopefully come up with a solution.

 

Thank you very much!

 

Peter

[Change Bezier Point Values midrace]

Hi Rodrigo,

 

well, thank you and thank you for your suggestions.

 

Option two sounds less complicated but wouldn't I be moving the complete Tween?

 

Cheers

[Change Bezier Point Values midrace]

I have a stream of particles that I need to control. I have achieved to hide the amount when dragging a controller, but I would also need to change some of the bezier-points to change the course of the particles.

 

I made a codepen to illustrate (the bar is the controller, you can drag it up and down)

 

Is there a way to achieve this?

 

Thank you!

See the Pen yyEmvY by ppdc (@ppdc) on CodePen

[SplitTextField: regOffsetY and regOffsetX not working]

Great, thank you!

 

Just out of curiosity: Why was my regOffsetY-approach not working?

 

Merry Christmas or whatever you're celebrating!

[SplitTextField: regOffsetY and regOffsetX not working]

I can't seem to get this working. I am trying to scale a textfield (by letter) from the center, but whatever I change regOffsetY to, it always scales from the top left corner. 

What am I doing wrong?

Thank you.

 

Peter

 

 

test.fla.zip

[stop previous tween on startdrag]

Works perfectly, thanks a lot!

[stop previous tween on startdrag]

Hi there, and sorry for the late reply, I wasn't alerted of your answers and busy with other stuff.

However, I can still replicate the error with both Safari 8 and Chrome 38 on MacOS 10.9 / 10.10. but also with Chrome and IE 10 running on an (emulated) Windows 7.

I made a little screencast: https://vimeo.com/109796603

 

It seems to happen when you drag while the previous tween is in it's 'back' movement (I'm using easeOut.Back).

 

Thank you

[stop previous tween on startdrag]

Hi,

is there a way to clear the existing draggable tween onStartDrag or onPress?

I get a small hickup when the draggable reaches the last snap-position and a user tries to drag past this position while there's already a draggable tween running. What happens is, it tweens to the previous snap-position. Setting the edgeResistance to 0 did not help, either.

 

So I'm trying to find out if there is a tween running and to clear that before the new Drag is initiated.

 

Thank you.

 

Peter

See the Pen tpGHI by ppdc (@ppdc) on CodePen

[rotate the shortest way]

Ahhh, thanks! I hoped you had a solution built in. Great!

[rotate the shortest way]

i set up a rotating masked wheel like this:

http://pedaci.de/geheimlabor/anim_dev/rotateWheel.html

 

now when you click the yellow and then green segments (and back) the mask spins all the way around instead of just taking the (obvious) short way.

is there a quick and easy way to correct this behaviour?

thanks.

[SHOWCASE - Share what you've done]

http://www.carabydenon.eu/

 

Fullsize Background Video, 360° flip effect and smooth easing.

Couldn't have done it without greensock, not in a hundert years.

 

Peter

[fullsize video-background // liquid stage]

hm, yeah, the attachments might have helped that… i just pm'ed you my mail and will resend the files later.

 

thx

[fullsize video-background // liquid stage]

did you have the chance to look over my code?

thanks.

 

ppdc