Develop Reference

How to set default element position AnimeJs/ Scollmagic

So what I am trying to achieve is to have the SVG element slide into the viewport as the user scrolls within the selected div. The effect is partially working since on the initial load, it doesn't position the element as I defined in CSS, in this case: right: -150px to hide it outside of the viewport, but it immediately sets it to the value assigned in the AnimeJS timeline.
If you scroll slowly, you are going to see the element in the position right: 0 which is the final location, and when it triggers, it pushes the element to -150 and starts the correct animation.
Is there any way to keep the SVG outside before the actual animation is triggered?
This is a codepen:
https://codepen.io/lukagurovic/pen/OJbvKGK
Update:
I just tried to add duration to the animation and it seems like the animation plays as soon as the page loads

Found the answer. The autoplay is not supposed to be set in the animation object, but rather in the timeline itself. const timeline = anime.timeline({autoplay: false});

How to trigger an SVG animation on scroll?

So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!

You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'

weird jQuery UI Slider behavior

I'm developing a simple one page website and I'm integrating the jQuery UI Slider. The website I'm integrating it in is : Website.
It seems like I'm having a little problem with the slider. If you look closely at the slider when navigating with the left and right arrow ( or the left and right keyboard keys ) you will notice that when going backward, before the last step, the min range jumps ahead the handle with a few pixels ( the background image ).
And also the animate property attached to the handle it doesn't work when using the mouse cursor to move the handle, per say the handle is in position 0 and you click on the last position, normally it should animate to the last position but it jumps there.
Could someone tell me how to fix these bugs ? I tried working on the CSS for the first problem but it doesn't seem to be because of that.

"min range jumps ahead the handle" - I've reduced the bug here: http://jsfiddle.net/jefferyto/Gd5dn/
This is a bug in jQuery.animate() when animating non-pixel values; Slider uses percentages. Before animating, jQuery converts the element's starting value (in pixels) into the end value's units, and assigns this non-px starting value to the element (lines 8601-8605 in jQuery 1.7.2 (unminified)).
The calculation is flawed for small end values (like 0%), and so the range's starting width is larger than what it should be.
I've opened a pull request with a fix; the same fix can be applied to the current stable version of jQuery.
Update: You can find a plugin that fixes this bug (for jQuery 1.7.2) here: http://jsfiddle.net/jefferyto/zbkQX/
Copy from (at the top)
// Start jQuery.animate() fix
to (before the test code)
// End jQuery.animate() fix
It should work if you paste this code into your plugins.js.
"it should animate to the last position but it jumps there" - this is because the Slider and jPages plugins are connected with circular callbacks.
When the user clicks on the slider, Slider triggers a slide event then animates the handle and range. The slide event handler calls jPages to change to the new page. jPages calls its assigned callback function, which passes the current page number back to Slider. Slider sets its value and starts to animate the handle/range.
After the slide event, Slider goes back to animating the handle and range (which is actually the second time it is animating). Slider calls .stop(1, 1) on the elements before animating, which causes the first animation to stop and jump immediately to its end value. (The second .animate() does nothing since the elements are already in the correct position.)
(I hope that made sense :-) )
I suggest adding logic in the jPages callback to call Slider with the new page number only if the trigger isn't originally from Slider.
Update: I think you'll need to update both callbacks:
For Slider:
slide: function(event, ui) {
if (!self.paging) {
self.paging = true;
$(self.shop_navigation_class).jPages(ui.value);
self.paging = false;
}
}
For jPages:
callback: function(pages) {
var data = {
current_page: pages.current,
total_pages: pages.count
}
self.set_local_storage_data(self.data_key, JSON.stringify(data));
if (!self.paging) {
self.paging = true;
$(self.shop_slider_class).slider("value", pages.current);
self.paging = false;
}
}
Please let me know if this works for you.

The simplest answer is probably to just not use jQueryUI's slider.
Having looked at your code it looks like you're easily competent enough at JS and CSS to replicate its appearance and core behaviour yourself, and make it work exactly how you want it to.

jQuery .prepend behaves wierd within my animation loop

If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));

I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.

How does one move html elements with scroll?

I want to create scroll behavior like what can be found here. If you scroll down the page you will notice the crabs, sharks, waves etc are animated whenever the page moves. How can this be achieved? Is this a script or CSS animation?
Edit: text bubbles also appear and disappear at different scroll points.

If you would like a more robust jQuery script to help you out: Per the answer at Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?:
A slightly more full fat solution to the already great one suggested
by Justin is to use jQuery Waypoints to manage the in viewport events.
...
(the answer by Nicholas Evens)

It is a script, just bind a function to the window 'scroll' event with a callback function to do whatever you want. You can tell how far you've scrolled with window.scrollY.
$(window).bind('scroll', function () {
console.log(window.scrollY);
});

You need to subscribe scroll event using jQuery and move your element basing on the scrolling offset whitch can be reached using .scrollTop() property
$(window).scroll(function () {
var scrollOffset = $(this).scrollTop();
// move element to the offcet
});

I didn't look at the site's source code, but I believe it depends on JS. Javascript is necessary to listen to the scroll event of the page, and act according to the current value of document.scrollTop. Then the elements can be positioned with JS, and images can be switched either directly in JS, or by using CSS to change some element's CSS class.

That is definitly a script, you can attach an onscroll event and get the percentage of the current scroll and just position your "crabs" depending on that.
There was already a lot of scripts of how to get the percentage here