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
});
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 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
I am trying to figure out how to use propeller.js to restrict the rotation angle of an image. As of right now, if I spin my image twice, my output would read 720. I would like to make it so the element’s output will reset to 0 when spun over 360. In addition, I would like it to not output negative angles if I spin counterclockwise. For example going from 10 to 280.
Here is a codepen of where I am currently at: http://codepen.io/anon/pen/YyZaXK
$('img').propeller({inertia: 1, speed: 10,onRotate: function(){ console.log(this.angle); }});
Any suggestions?
Thanks!
Figured it out!
Using a Modulo made this work the way I wanted!
Here’s what I added:
(degrees + 360) % 360
Which resulted in:
$('img').propeller({inertia: 1, speed: 10,onRotate: function(){ console.log((this.angle + 360) % 360); }});
Looked in the Propeller.js source, found another solution. You can set zero angle if 360 is reached:
onRotate: function(){
if(this.angle===360)
{
this.virtualAngle = 0;
}
console.log(this.angle);
}
You could also make use of the normalizeAngle() method of Propeller itself:
onRotate: function () {
console.log(this.normalizeAngle(this.angle));
}
That also avoids negative angles.
I'm currently experimenting a bit with Famo.us and there is actually one thing I can't yet wrap my head around.
In a small example i tried to create a HeaderFooterLayout, where the header contains a simple icon left aligned. A click on it will bounce it to the right end of the header.
Now with a simple Transform.translate this works not as smooth as expected on my Nexus4 and Nexus 7, but hell changing it to a SpringTransition rocks. Here is the code example:
var Transitionable = require('famous/transitions/Transitionable');
var SpringTransition = require('famous/transitions/SpringTransition');
Transitionable.registerMethod('spring', SpringTransition);
var logoStateModifier = new StateModifier({});
var logo = new ImageSurface({
size: [186, 43],
content: 'images/my-logo.png'
});
var posX = 0;
var adjustment = 20;
// Click event on image
logo.on('click', function() {
if(posX === 0) {
posX = (window.innerWidth - logo.size[0] - adjustment);
} else {
posX = 0;
}
var spring = {
method: 'spring',
period: 10,
dampingRatio: 0.3,
};
// transform translate with Easing
logoStateModifier.setTransform(
Transform.translate(posX,0,0),
{ duration: 1000, curve: Easing.inOutBack}
);
// spring transition
logoStateModifier.setTransform(
Transform.translate(posX, 0, 0), spring
);
});
So what I don't understand here is why Easing is so "slow" compared to the Physics driven SpringTransition?
The spring transition your requesting has a period of 10ms while the easing transition is 1000ms or 100 times slower. I tried your code "as is" and with a modification that compares more apples to apples and the transitions can run at the same speed (both laptop and devices.) First you should note that the minimum spring period is 150ms so the 10ms your asking for is actually 150. Second you are stacking the transitions so that one follows the other. The easing will take 1 second and then the spring will oscillate. You may want to try something slightly different... set the transitions to the following:
// transform translate with Easing
logoStateModifier.setTransform(
Transform.translate(posX,0,0),
{ duration: 150, curve: Easing.inOutBack}
);
// spring transition
logoStateModifier.setTransform(
Transform.translate(0, 0, 0), spring
);
This will behave slightly differently. On click (every other click actually) the logo will cross the screen at high speed and then come back. I expect you'll find that these transitions run at comparable high speeds. Of course for a slower more viewable test you can set the spring period to 1000 and the easing duration to the same and again the speeds should be comparable.
I am using this great jQuery plugin to have the fullscreen backgound for my website.
This plugin currently fills the entire background on the screen, I was wondering if it is possible to give it a margin.
For instance I want to have a gap in the right side of the screen for 150px (so I can see the body background) and the rest of the page will be filled with backstretch.
I have played with _adjustBG function but I can't get this working.
Any helps will be appreciated.
Since the author of this plugin didn't make an option for margin, I'll tweak it for you.
Below is the modified _adjustBG() function that you may need.
Just open the file "jquery.backstretch.js" (the normal version, not the minimized) then replace the original _adjustBG() function (at the end of file) with this function.
function _adjustBG(fn) {
var rightMargin = 150; //--- edit the margin value here
try {
bgCSS = {left: 0, top: 0}
bgWidth = rootElement.width()-rightMargin;
bgHeight = bgWidth / imgRatio;
// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= rootElement.height()) {
bgOffset = (bgHeight - rootElement.height()) /2;
if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
} else {
bgHeight = rootElement.height();
bgWidth = bgHeight * imgRatio-rightMargin;
bgOffset = (bgWidth - rootElement.width()) / 2;
if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
}
$("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
.filter("img").css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}
// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
}
Update:
By poking around w/ console, I found that if you subtract 150 from the width of the background-image, it will, by default, give you a margin on the right. You may want to adjust the height so your image scales, but, maybe something like this to run in $(document).ready():
var $bg = $('#backstretch');
var newImgWidth = $bg.width() - 150;
$bg.css('width', newImgWidth);
If IE6 is no issue, you can try to put the following in your stylesheet:
#backstretch{
width: auto !important;
right: 150px;
}
I tried this on the backstretch homepage and it worked as I would expect. As I am not totally familiar with this plugin please feel free to correct me.