I am working with js greensock animation library. I have an animation that pauses when you start to resize the window and continues when you stop resizing the window.
I am now attempting to make the animation (Start over) or from a (certain point) if the window width passes 865px in either direction.
The current code im working with works "Okay" it refreshes the entire page upon reaching 865px in either direction. However, instead of reloading entire page I would just simply like to "restart" the animation.
Here is a working CODEPEN
And here is the snippet of JS that I am working with and referring to.
//Reload Animation if window width crosses over 865px either way.
var ww = $(window).width();
var limit = 865;
function refresh() {
ww = $(window).width();
var w = ww<limit ? (location.reload(true)) : ( ww>limit ? (location.reload(true)) : ww=limit );
}
var tOut;
$(window).resize(function() {
var resW = $(window).width();
clearTimeout(tOut);
if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {
tOut = setTimeout(refresh, 0);
}
});
Thanks!
There is no need to refresh the whole page. There are several ways to manipulate a Tween or Timeline.
If you want to play it from the beginning the easiest way would be:
myTimeline.restart()
Alternatively you could change the progress and play the animation from that point:
myTimeline.progress( myProgress )
The placeholder myProgress can be 0 marking the start and 1 being the end of the Tween (or any number inbetween). So the code to play it from the start would look something like this:
myTimeline.progress( 0 ).play()
A third way would be .play( time )
This is similar to .progress() with the difference that myProgress is a relative measurement and time is an absolute one. So if the duration of myTimeline is 8 seconds myTimeline.progress(0.5).play() would have the same result as myTimeline.play(4)
EDIT:
Here is a fork of your Pen. I believe it does what you are looking for:
http://codepen.io/anon/pen/adqypP
You can call .restart() which restarts and begins playing forward from the beginning when using TweenMax or TweenLite.
API infos here:
https://greensock.com/docs/TweenMax/restart()
Related
I've been learning Three.js and I came across these examples by Nat Geo. I was wondering if anyone knows how to make the scroll wheel control the progression of the animation and how it is mixed with their website's regular look... It seems like in the first example that the webgl element is in the background with the normal html elements floating over it, but I don't understand how they timed the animations to it.
If anyone has insight on how these were created I'd appreciate it!
https://www.nationalgeographic.com/science/2017/09/cassini-saturn-nasa-3d-grand-tour/#enceladus
https://www.nationalgeographic.com/science/2016/11/exploring-mars-map-panorama-pictures/
Scrolling is a browser event.
I did not look at the linked pages specifically, instead I'll describe a more generic scenario.
Once you understand how the event works, it's easy to see that one could track how far one has scrolled on the current page. Look at the scroll distance as a kind of trigger, where once you pass distance X, then something specific should happen.
Consider the below snippet, where crossing certain thresholds changes the background color of the button:
var button = document.getElementById("myButton");
var position = 0;
function scrollHandler(e) {
e.preventDefault();
if (e.wheelDeltaY > 0 || position !== 0) {
position += e.wheelDeltaY;
}
console.log(position);
if (position < 500) {
button.style.background = "";
}
if (position > 500) {
button.style.background = "red";
}
if (position > 1000) {
button.style.background = "green";
}
}
button.addEventListener("mousewheel", scrollHandler);
button.addEventListener("DOMMouseScroll", scrollHandler);
<input id="myButton" type="button" value="BUTTON!" />
Run the code snippet, then hover over the button and scroll up/down.
For animations, the time is what you need.
var uniTime = gl.getUniformLocation( prg, "uniTime" );
gl.uniform1f( uniTime, time );
But you can cheat and use the amount of scrolling in place of real time.
For instance, if you need that the full scroll of your screen represents 7 seconds, you can use this bit of code in your animation loop:
time = 7000 * screen.scrollTop / screen.scrollHeight;
Here is a living example: https://jsfiddle.net/m1a9qry6/23/
First, thanks in advance for any help.
Second, I would like to mention that I have looked at different questions related to this topic as well as read documentation for both animate() and scrollLeft() on MDN I think my question is actually more based on syntax rather than function usage and that is why the other questions have not been as helpful to me.
Now, on to the issue. I am attempting to modify javascript code that I have previously written so that one function can react to the viewport of any user.
On the HTML side, I have a table with one <tr> and 3 <td>'s. The 3 <td>'s are filled with a picture and info and when the user clicks on buttons below, the table scrolls itself to the appropriate content. The buttons work fine. The problem is actually that the images are bigger than the viewport (on any device) and so on initial page load, the image needs to be scrolled by a distance proportional to both the viewport and the asset size (I load different assets based on viewport also). The formula for scroll distance, I discovered, is
0.5( assetWidth ) - 0.5( viewportWidth ).
So, here is the JS I have come up with (this is all inside a jQuery(document).ready(function($){
var scrollDistance;
if ($('#interactive-row:visible').length == 0) {
//Viewport > 801px
var assetWidth = 1920;
console.log("bouta set scrolDistance");
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
} else {
//Viewport < 800px
var assetWidth = 1428;
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
}
//scroll to zero so that whne user goes "back" slider position is reset (w/o variable lastClick gets messed up)
$('.table-container').animate({
scrollLeft: 0
}, "slow");
console.log( "Scroll Distance is " + scrollDistance + " calculation is about to begin." );
//move slider to middle of SSI screen
$('.table-container').animate({
scrollLeft: += scrollDistance.valueOf()
}, "slow");
The problem (I believe) is on the second-to-last line at which point my intentions are to have the browser scroll to whatever number is inside scrollDistance.
Note: here is what firefox and chrome say: "SyntaxError: expected expression, got '+='[Learn More]"
Also, I have already tried using scrollDistance with out adding the .valueOf(). I put that on recently in case there was some sort of type issue in javascript that I wasn't aware of.
Feel free to take a look at this graphic to better understand what I am trying to do. Graphic of what browser should display
Thanks in advance for the help, I am new to Javascript and anything at all that you all can tell me (even just general pointers about how I write my code) is much appreciated!
Edit: It just occurred to me that it may also worth noting that my console.log() is not working at all but I could care less about that if the scroll starts working :D
My team and me are developing a web application which bears a fixed header, that doesn't scroll.
In order to handle overscrolling on iOS, we need to detect scrolling in negative direction and reposition the fixed header as static again to make it scroll along with the rest of the page.We do this by binding a jQuery scroll handler to window:
$(window).scroll(function() {
if ($(window).scrollTop() < 0) {
// position static header postioning in order
// let the header behave correctly when overscrolling
}
});
This works well, when the page is manually pulled (dragged) down.
But as every iOS user knows, when scrolling the page from a downwards position with speed up again, it bounces (overscrolls), once it reaches its top.
In this case, our scroll handling doesn't work.
At the moment I can imagine two reasons, why this different behaviour occurs:
Rapid scrolling upwards, and making a page bounce, is too fast for Safari's JS engine to ensure a fluid handling
Is bouncing when scrolling upwards technically the same as manually pulling down a webpage? In respect to $(window).scrollTop() ?
Has anybody some hints how to make my scroll handling work in both cases?
If position:fixed in CSS isn't working for you, then you should try to make a draw loop, and every single time that loop runs, you place a horizontal offset that is equal to how far your user has scrolled.
Basically, your JS should look like this if CSS doesn't work:
var head = document.getElementById("header");
//head now has our header
head.style.position = "relative";
//and now, we can manipulate it's position
function draw(){
head.style.top = window.pageYOffset;
//all that's left to do is do this each and every frame.
}
And if you don't know how to make a draw loop, here's the code:
var frameRate = 60;
var frameCounter = (function(){
var counter = 0;
return function(){
counter ++;
if(counter > frameRate/1000){
counter -= frameRate/1000;
draw();
}
}
})();
setInterval(frameCounter, 1);
This has been resolved in iOS 9.3 New meta tag option
<meta name="viewport"content="width=device-width,shrink-to-fit=no">
I made a image scrolling with the mouse.
The image scroll to a position based on the mouse position percentage of the window height.
$(imageContainer).mouseenter(function(e){
var scrollingTo = ((e.pageY/$(this).height())-.083) * ( $(imageContainer).prop('scrollHeight') - $(imageContainer).height() );
hijacked = true;
$(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});
}).mousemove(function(e){
if(hijacked) return;
var scrollingTo = ((e.pageY/$(this).height())-.083) * ( $(imageContainer).prop('scrollHeight') - $(imageContainer).height() );
$(imageContainer).scrollTop(scrollingTo);
});
So. in that line
$(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});
I want that scrollingTo change. Because during the animation, the user can move the mouse, changing the scrollingTo variable.
Alright, I managed to cook together a hacky way of dynamically altering an animation. My understanding of the internal animation queue for jQuery is not great, but as far as I know there's no way to alter a queued animation, other than to make it stop. Anyway, here's the key code for an example that alters position, which should be adaptable to scrolling (in fiddle form):
$(document).ready(function () {
var last_update = 0;
$(document).on("mousemove", function (e) {
if (Date.now() - last_update > 50) {
$mover = $("#mover");
$mover.stop();
$mover.animate({ left: e.pageX, top: e.pageY}, 200, "linear");
last_update = Date.now();
}
});
});
There were a couple of tricks to make it work, I'll go through them and try to explain how I believe they could be adapted to scrolling:
The main idea is that on mousemove, the prior event is cancelled, and a new one is started.
I don't believe this will require any changes for scrolling.
Some forms of animation accelerate/decelerate over the course of the animation - it's too hard to preserve this in a constantly changing animation (at least without writing a custom animation function), so the animation easing is set to "linear".
rapidly changing animations takes time (especially for an event as common as mousemove), so there's a limit on how often the animation can change. Before a change to the animation is made, it's ensured that no changes have been made in the last .05 seconds (this is done with "last_update").
I believe if you just swap out the animation properties for your own (scrollTop), this should do what you're looking for.
I have a horizontally scrolling website, and I have a block that I want to stay in frame at all times as the user scrolls right. It looks perfectly smooth in webkit browsers, but is crazy jagged in Firefox and I don't really care about IEs.
function fixMyId(){
$('#myId').css({'margin-left': 150 + $(window).scrollLeft()});
}
function fixMyIdAlt(){
$('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300);
}
And then I have it triggered on window scroll.
What would be a best way to average out the scrolling, so that maybe every so many seconds or pixels of scrolling it fires the function, or upon stopping the scrolling it animates the block into place? I tried playing with delay() but that doesn't do anything. And this one just looks stupid (plus I have no idea what the overhead of this kind of crunching is):
function fixMyIdStupid(){
window.scrollCounter++;
if(window.scrollCounter % 20 == 0) $('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300);
}
So what do I do? setTimeout and setInterval may be required, but those always make my head hurt.
EDIT: Here's a jsfiddle of it in action: http://jsfiddle.net/xsxSq/
The #f0f square is the #myId.
I tried to do such things as well, problem is that the scroll event isn't fired as much as you want. A nice workaround was subscribing the calculation function to the mousemove event, so it triggers A LOT. But on the other hand, I came up with another solution.
Why not turn things around and ask yourself:
Lets make it a position:fixed object and calculate what happens on resize. Because you actually are trying to create a position-x:fixed; and a position-y:absolute;
I actually did the following for the opposite kind of thing. A block that has to be exactly in the middle of the x-document, but in the y it was fixed.
$(document).ready(function ()
{
replaceFixed();
$(window).resize(replaceFixed);
$('#content').ajaxSuccess(replaceFixed);
$(window).scroll(replaceFixed);
function replaceFixed()
{
var jEl = $('#centeredFixedContainer');
var winW = $(window).width();
var docW = $(document).width();
var scrL = $(window).scrollLeft();
var divW = jEl.width();
var result = 0;
// window bigger than the element
if(winW > divW)
{
result = -scrL + ((docW-winW)/2);
}
else
{
result = $('#mainContainer').offset().left - scrL;
}
jEl.css('left',result);
}
});
Copying this code will not give you the solution, but will indicate another way to look at your problem.