I have a page with some background image.
In body tag I have a svg element with only one inner path element.
How to add backdrop-filter to path element so it could blur background in non-rectangular shape?
$(function() { var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z"; var $svg = $('svg#footer'); var $path = $svg.find('path'); var settings = { width: 1200, height: 200, offsetTop: 200, power: 200 } settings.ax1 = settings.width / 3 * 1; settings.ax2 = settings.width / 3 * 2; function render() { var newPath = pattern; for (var i in settings) { newPath = newPath.split('{' + i + '}').join(settings[i]); } $path.attr('d', newPath); } TweenMax.set($svg, { force3D: true }) var opened = false; function open() { if (opened) { return } opened = true; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render }) TweenMax.to(settings, 1, { power: 80, ease: Elastic.easeOut, onUpdate: render }) } function close() { if (!opened) { return } opened = false; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 200, ease: Back.easeIn, onUpdate: render }) TweenMax.to(settings, 0.35, { power: 200, delay: 0.15, ease: Back.easeOut, onUpdate: render }) } $(window).on('mousedown touchstart', function(e) { opened ? close() : open(); }) open(); })
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg'); background-repeat: no-repeat; background-size: cover; } svg { position: absolute; bottom: 0; width: 100%; height: 200px; } svg path { fill: rgba(0, 0, 0, 0.5); }
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Without doing too many changes to your code, you can achieve that by increasing your power
and/or decreasing your offsetTop
in the open function.
TweenMax.to(settings, 0.35, {overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render }) TweenMax.to(settings, 1, {power: 120, ease: Elastic.easeOut, onUpdate: render })
$(function() { var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z"; var $svg = $('svg#footer'); var $path = $svg.find('path'); var settings = { width: 1200, height: 200, offsetTop: 200, power: 200 } settings.ax1 = settings.width / 3 * 1; settings.ax2 = settings.width / 3 * 2; function render() { var newPath = pattern; for (var i in settings) { newPath = newPath.split('{' + i + '}').join(settings[i]); } $path.attr('d', newPath); } TweenMax.set($svg, { force3D: true }) var opened = false; function open() { if (opened) { return } opened = true; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render }) TweenMax.to(settings, 1, { power: 150, ease: Elastic.easeOut, onUpdate: render }) } function close() { if (!opened) { return } opened = false; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 200, ease: Back.easeIn, onUpdate: render }) TweenMax.to(settings, 0.35, { power: 200, delay: 0.15, ease: Back.easeOut, onUpdate: render }) } $(window).on('mousedown touchstart', function(e) { opened ? close() : open(); }) open(); })
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg'); background-repeat: no-repeat; background-size: cover; } svg { position: absolute; bottom: 0; width: 100%; height: 200px; } svg path { fill: rgba(0, 0, 0, 0.5); }
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Another solution is to add a curved path (called quadratic Bézier curve) to your rectangle. The curve is built like this:
M{startWidth}, {startHeight} q {curvePeak}, {curveHeight}, {endWidth}, {endHeight}
P0
: x coordinate where the curve startsP0
: y coordinate where the curve startsP1
: where the curve reach it's peak P1
: height of the curveP2
: dimension of the curveP2
: inclination of the curveSee also: Quadratic Bézier Curve: Calculate Points or click here for an interactive example of the quadratic Bézier curve.
Negative
This solution has some problems when using two different animations and duration, like in your case.
Strong.easeOut
: 0.35sElastic.easeOut
: 1.00s$(function() { var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z q 600, 100, 1200, 0"; var $svg = $('svg#footer'); var $path = $svg.find('path'); var settings = { width: 1200, height: 200, offsetTop: 200, power: 200 } settings.ax1 = settings.width / 3 * 1; settings.ax2 = settings.width / 3 * 2; function render() { var newPath = pattern; for (var i in settings) { newPath = newPath.split('{' + i + '}').join(settings[i]); } $path.attr('d', newPath); } TweenMax.set($svg, { force3D: true }) var opened = false; function open() { if (opened) { return } opened = true; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render }) TweenMax.to(settings, 1, { power: 80, ease: Elastic.easeOut, onUpdate: render }) } function close() { if (!opened) { return } opened = false; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 200, ease: Back.easeIn, onUpdate: render }) TweenMax.to(settings, 0.35, { power: 200, delay: 0.15, ease: Back.easeOut, onUpdate: render }) } $(window).on('mousedown touchstart', function(e) { opened ? close() : open(); }) open(); })
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg'); background-repeat: no-repeat; background-size: cover; } svg { position: absolute; bottom: 0; width: 100%; height: 200px; } svg path { fill: rgba(0, 0, 0, 0.5); }
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Positive
On the contrary it works great when using the same animation and duration.
Both with Elastic.easeOut
: 1.00s
$(function() { var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z q 600, 100, 1200, 0"; var $svg = $('svg#footer'); var $path = $svg.find('path'); var settings = { width: 1200, height: 200, offsetTop: 200, power: 200 } settings.ax1 = settings.width / 3 * 1; settings.ax2 = settings.width / 3 * 2; function render() { var newPath = pattern; for (var i in settings) { newPath = newPath.split('{' + i + '}').join(settings[i]); } $path.attr('d', newPath); } TweenMax.set($svg, { force3D: true }) var opened = false; function open() { if (opened) { return } opened = true; TweenMax.to(settings, 1, { overwrite: true, offsetTop: 80, ease: Elastic.easeOut, onUpdate: render }) TweenMax.to(settings, 1, { power: 80, ease: Elastic.easeOut, onUpdate: render }) } function close() { if (!opened) { return } opened = false; TweenMax.to(settings, 0.35, { overwrite: true, offsetTop: 200, ease: Back.easeIn, onUpdate: render }) TweenMax.to(settings, 0.35, { power: 200, ease: Back.easeIn, onUpdate: render }) } $(window).on('mousedown touchstart', function(e) { opened ? close() : open(); }) open(); })
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg'); background-repeat: no-repeat; background-size: cover; } svg { position: absolute; bottom: 0; width: 100%; height: 200px; } svg path { fill: rgba(0, 0, 0, 0.5); }
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With