I want to create some kind of zoom out animated effect using GSAP. What I'm trying to do is scaling an element from double its size to the normal size and apply a vanishing blur filter. The filter should start at blur(15px) and going down to blur(0).
I thought I could do it this way:
var el = $('img');
TweenLite.set(el, {
'webkitFilter': 'blur(15px)',
scale: 2
});
TweenLite.to(el, 0, {
autoAlpha: 1,
delay: 1.75,
ease: Power2.easeIn
});
TweenLite.to(el, 2, {
'webkitFilter': 'blur(0px)',
scale: 1,
delay: 1.7,
ease: Power2.easeIn
});
What happens, instead, is that the blur(0) gets applied immediately.
Here's a simple pen showing the problem.
What am I doing wrong?
Have you tried just updating to GSAP 1.18.4? Seems to work in your codepen. The CDN link to TweenMax 1.18.4 is https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js
you can't really animate the blur filter, but you can set it. You can basically set up a timeline and use the progression of the timeline as the method to set the filter over the timeline duration.
below is update function that sets the blur over the timeline duration.
onUpdate:function(tl){
var tlp = (tl.progress()*40)>>0;
TweenMax.set('#blur img',{'-webkit-filter':'blur(' + tlp + 'px' + ')','filter':'blur(' + tlp + 'px' + ')'});
var heading = $('#blur h3');
heading.text('blur(' + tlp + 'px)');
}
here is a great demo made by Marzullo http://codepen.io/jonathan/pen/ZWOmmg
Related
I have long list of elements with svg icons(60-70 elements) and I want to animate it so it looks like infinite scrolling. I am using animejs library and animating translateY property of the g group which contains all elements. This works ok but performance is not very good. I am already using will-change: transform CSS attribute for the g tags which are being animated. I am animating just single translateY transform, why is performance so poor? How can I improve performance?
I could try to have only elements required to cover the screen and then animate these elements instead. But that would require constantly changing "src" attribute of the elements which come from off screen and I feel like would be even slower.
Should I replace SVG icons with png? I feel like this should not affect animation performance.
Unfortunately I can't use CSS animations because I need to sync this animation with some other animations on the page.
let initialOffset = 0;
let currentOffset = 0;
anime({
target: '.group-of-boxes',
duration: 1000,
easing: 'linear',
loop: true,
loopBegin: function(anim) {
initialOffset = currentOffset;
},
update: function(anim) {
const d = 100 * anim.progress / 100;
currentOffset = clipOffset(initialOffset + d, object);
anime.set(target , {
translateY: currentOffset
});
}
});
I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this:
#keyframes {
to {
transform: translateY(-100%) translateY(100vh);
}
}
This proved to be a crossbrowser way in CSS instead of:
transform: translateY(calc(-100% + 100vh));
Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly:
var value = -$('img').height() + $(window).height();
var tweenDown = TweenMax.to("img", 5, {y: value});
However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position.
Thanks in advance!
This is what I came up with for those wondering:
TweenMax.to('img', 5, {
transform: 'translate3d(0,100vh,0)',
percentY: -100
});
[My solution to the bottom]
Actually, with current version of GSAP I think this would be
TweenMax.to('img', 5, {
y: '100vh',
yPercent: -100
});
But, the 'the notes about transforms' documentation section says
To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based
https://greensock.com/docs/Plugins/CSSPlugin
Judging by the above,
I think 100vh for y would be interpreted as 100px when added in the css matrix property. In order for this to fully work, I opted for the following:
TweenMax.to('img', 5, {
y: window.innherHeight, // or $(window).heigth()
yPercent: -100
});
I have a jQuery Mobile page and I want to animate the Save button on this page to lose half of its width/height and then to animate back to its original size.
function animateMe() {
var originalHeight = $("#btnSave").height();
var originalWidth = $("#btnSave").width();
$("#btnSave").animate(
{"height": originalHeight / 2, "width": originalWidth / 2},
{ duration: "fast" }
);
$("#btnSave").animate(
{"height": originalHeight, "width": originalWidth},
{ duration: "fast" }
);
}
The animation works fine, but I was hoping for the button to collapse its middle, instead it collapses to its top/left location (as one would expect).
How can I animate the button to collapse to its middle and then back?
This would be much better using CSS3 animation and the scale transform, instead of relying on jQuery's animate. Beside other advantages with using CSS3 animations for this, the performance should be much better.
Here's a rough example, just to give you an idea:
http://jsfiddle.net/ghinda/8nNeS/
You would have to add to the animation a position change, or padding change, that offsets the element's image as well.
$("#btnSave").animate({
"height": originalHeight / 2 + "px",
"width": originalWidth / 2 + "px",
"padding-left": (originalWidth / 2) + "px",
"padding-top": (originalHeight / 2) + "px",
}, {
duration: "fast"
});
Something similar to that, anyway.
I am quite new to javascript and to Raphael. I am trying to move a button-like rectangle with text inside. Here is my code :
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), "100%", "100%");
var box1 = paper.rect(100, 100, 120, 50, 10).attr({fill: 'darkorange', stroke: '#3b4449', 'stroke-width': 2, cursor: 'pointer'});
var box2 = paper.rect(400,100,120,50,10).attr({fill: 'lightblue', stroke: '#3b4449', 'stroke-width': 2});
var text2 = paper.text(box2.attrs.x + box2.attrs.width/2,box2.attrs.y + box2.attrs.height/2,"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]").attr({"font-family": "arial", "font-size": 16});
var button2 = paper.set();
button2.push(box2);
button2.push(text2);
box1.click(function(){
// this did not work
// button2.animate({x: 100, y: 50 }, 1000, 'bounce', function() { // callback function
// text2.attr('text',"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]");
// });
button2.animate({transform: "t100,100"}, 1000, 'bounce', function() { // callback function
text2.attr('text',"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]");
});
});
}
The button2.animate({x: 100, y: 50 }, 1000, 'bounce'); line did not worked properly, the text was not in the right position at the end. By using the transform: I can not use coordinates, I would have to compute them. Also I am not able to get the right coordinates of the blue box at the end when using the transform method.
I was not able to find any answer yet, hope someone can help me.
Thank you
Since you didn't explain how exactly you want to move your button, I'm assuming you want to move the box2 above box1.
There are some misunderstandings and errors in your code, allow me explain one by one.
Why the first way cause text move to wrong position at end ?
Because a set is NOT a group of element which knows its relative position inside the group. A set is merely a collection of elements which is designed for us to operate them in a more convenient way.
So, the code below will move all element in the set to (100, 50)
set.animate({x: 100, y: 50 }, 1000);
and that's why the text is there.
I couldn't find the document, but you can find some explanation here .
Why x, y in attributes seems to be wrong when using transform ?
No, the attribute is correct.
When you transform an element, the result of the transformation will not reflect back to the attributes. You can think like this, when transform(), you are actually attach "transformation" to the elements. Therefore :
paper.circle(100, 100, 5).transform("t100");
You can describe the circle as :
a circle at (100, 100) which will be moved 100px horizontally.
but not - a circle at (200, 100) which will be moved 100px horizontally.
So, here is the code that dose what you want, note that I'm using getBBox() to get coordinate of the button2 set.
box1.click(function(){
var moveX = box1.attr("x") - button2.getBBox().x;
var moveY = (box1.attr("y") - 50) - button2.getBBox().y;
button2.animate({transform: "t" + moveX + "," + moveY}, 1000, 'ease-in-out', function () {
text2.attr('text', "[x: " + button2.getBBox().x + "y: " + button2.getBBox().x + "]");
});
});
Welcome to SO, and suggest you to write a SSCCE next time.
UPDATE
I do not fully understand why the transformation does not reflect back
to the attributes. If I move the circle at the position (100,100)
100px horizontally it will results in a circle at position (200,100).
This is what the bounding box gives me. So why I am not able to get
the coordinates from the circle after the transformation and have to
use the bounding-box method ?
Transform DOSE NOT change the original attribute in the element, because it is something you attach to a element, not function that change a element directly. If you want to know attributes AFTER the transformation applied, you have to use getBBox(), or take a look about matrix.
This is how Raphael.js works. Either you use bounding box function, or extend the Raphael.js by yourself like this
I have changed my previous answer about how I describe transformation a little bit, hope it can help you to understand better this time.
Your code works great but it has the drawback, that you have to
compute the transformation values instead of simply setting the
position. Is there any other way to move a rectangle with text inside
to a position of your choice ?
You can always write helper functions to do these ugly jobs for you anyway, I don't see there's anything wrong with it.
I am looking for a mootools plugin which will enlarge image on mouseover over the current image. So when a user is hovering on a image user feel the image is enlarged. Very close to my requirements were http://highslide.com/. Here is a sample I found http://jsfiddle.net/Jmeks/2/. I need exactly like this using mootools with some mootools effect. Any help greatly appreciated.
Does this fiddle work for you?
EDIT: I have changed the link so that it uses the transform css property as you required.
JavaScript:
window.myFx = new Fx({
duration: 300,
transition: Fx.Transitions.Sine.easeOut
});
myFx.set = function(value) {
var style = "scale(" + (value) + ")";
$('content-block').setStyles({
"-webkit-transform": style,
"-moz-transform": style,
"-o-transform": style,
"-ms-transform": style,
transform: style
});
}
$('content-block').addEvent('mouseover', function() {
myFx.start(1,1.4);
});
$('content-block').addEvent('mouseout', function() {
myFx.start(1.4,1);
});