[Applying perspective transforms to SVG]

After finding this post and discovering that perspective effects don't work inside inline SVG files, as well as the "rotationY" tweens with GSAP, I made it using CSS variables and setting an upscale in relation to the angle using some utilities (+ a small shadow effect).

Not the perfect result, but much better than nothing and my client was happy with the final result.

I hope this helps in this case too, maybe some improvement ideas will come...

See the Pen XWGxRMm by jester6 (@jester6) on CodePen

[Draggable Infinite Carousel with Snap and Indexing]

And I can't thank google enough for bringing me on this topic...

Many thanks to Jack!

[Draggable with forbidden areas]

Thank you for your reply. I agree, it's a complicated task and, in my case, it's not worth the effort for the particular project I'm working on... also not mandatory.

It's good to know for future projects so I can give the proper feedback

[Draggable with forbidden areas]

Hello,

Is it possible to "punch out" some areas inside the bounds of a Draggable area?

I've read the docs and tried some approaches using the snap/liveSnap properties, but maybe I'm missing something here.

The draggable and throwable boxes should "bounce off" the static ones when touching the green static ones.

Looking for a nicer result instead of just a "gsap.to" when they're touching...

See the Pen WNzRrNJ by jester6 (@jester6) on CodePen

[keeping the focus when using Flip on an input]

Thank you!

I'm happy to be using GSAP

[keeping the focus when using Flip on an input]

Now I understand it

It works perfectly!

It's already live, obviously the final version is more stylish here with the search field Intreb BT - Banca Transilvania

Thank you so much!

[keeping the focus when using Flip on an input]

Hello,

I am trying to animate an input element using Flip for when the user is typing something, but when Flip is called my input is loosing the focus.

I tried calling a onComplete: function() { input.focus() }, but that doesn't work...

See the Pen KKQWOdV by jester6 (@jester6) on CodePen

[Hide version number]

@Cassie That's exactly what I've told them, but thanks to your answer they believe me now... I think the issue is with them updating the procedure.

Thank you!

[Hide version number]

Hello!

This is a technical question. For security reasons we've been recommended to hide all version numbers from all javascript plugins and libraries.

Is it possible to do this with GSAP?

[morphSVG and <filter>]

Thank you very much for your help!

 

I did a little research. The problem was on my end.

I had the chance to test it on other computers and laptops today and everything works fine.

Problem was with my home monitor settings and I need to redo the calibration on it.

I've been living a lie!

 

I am very sorry for this irrelevant issue!

[morphSVG and <filter>]

this is weird, I can see your codepen alright (in Chrome) and I have no idea what I'm missing on my side... I give up, no more shadows.

 

I've never seen these before

inkscape:version="0.91 r13725"
sodipodi:docname="Domestic_Dromedary_silhouette.svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"

What are they and why do I need them?

[morphSVG and <filter>]

Sorry about this, I should have done it before posting;

- Google Chrome seems to be processing the filters only once

- Firefox: the last update has a lot of javascript issues and this browser always had a problem with inline SVG even if they say they have full support... whatever

- Safari seems to be working just fine

- Edge - PERFECT

 

I'm ok to wait for them to support all the features.

Other than that, as long as the animation works it's more than ok and if the browser can handle filters -> better.

[morphSVG and <filter>]

Hello!

 

I have the following:

<svg ......>
	<defs>
		<filter height="100%" width="100%" y="0" x="0" filterUnits="objectBoundingBox" id="dropshadow2">
			<feGaussianBlur  in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
			<feOffset dy="4" dx="0"></feOffset>
			<feComponentTransfer>
				<feFuncA  type="linear" slope="0.21"></feFuncA>
			</feComponentTransfer>
			<feMerge>
				<feMergeNode></feMergeNode>
				<feMergeNode  in="SourceGraphic"></feMergeNode>
			</feMerge>
		</filter>
	</defs>

	<path filter="url(#dropshadow2)" d=".........."/>
</svg>

Is there any way to keep the filter properties as the animation goes?