Performance on svg with filters

[nitrokevin]

I've created a svg shape with a masked image and am them using scrollmagic to add a parallax effect to just the image inside the shape, this works fine until I try to add a drop shadow to the svg shape using either css filters or svg filters.

Scroll magic code ` $('#masked-image').each(function () { var featuredtween = TweenMax.fromTo($(this), 1.2, { y: "0", scale:"1",

}, {
    y: "30%",
  ease: Power1.easeOut
}, 0.2);

// build scene
var scene = new ScrollMagic.Scene({
triggerElement: 'body',
triggerHook: 0,
    duration: 2000, 
    tweenChanges: true
  })
  .setTween(featuredtween)
  .addTo(controller);

}); `

[nitrokevin]

github won't let me paste the svg code but hopefully you get the idea

[jonkwheeler]

This has nothing to do with ScrollMagic unfortunately. This is a paint issue with the browser. Animating filters is a very expensive operation. I'd recommend you not do it.