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});
Related
I'm using jQuery.kinetic to allow a div to be scrolled within its parent div by dragging the mouse, just like the demo on the author's site
I want to add a button, which upon clicking it, moves the jQuery.kinetic activated div to a certain position, however I could not find how to do this. I know the scrollLeft and scrollRight methods can be called to change the position, exactly as I want:
$("container-selector").kinetic("scrollLeft", 50);
$("container-selector").kinetic("scrollTop", 480);
However I wish the change in positions to be animated, not immediate like how the code above does it.
Would anybody know how to smoothly move the draggable div to a specified position upon the clicking of a button, and have this animated? Thanks!
From the demo page HERE
$('#yourButtonIdOrClass').click(function() {
$('.container-selector').kinetic('start', { velocity: -10 }); // code to move your container
});
From the Doc's
Start movement in the scroll container at a particular velocity.
This velocity will not slow until the end method is called.
So you need to call the end() method to stop the div from scrolling either to the end of the right hand side or end of the left hand side, you might want to use the moved event and check how much the container has moved something like the below:
moved : function() {
if() // check moved position {
$('.container-selector').kinetic('end');
}
}
The above code will go inside the initialization of the plugin.
NOTE:: you can use the dev tools to check the event listeners attached to the left or right buttons.
I would like to trigger an SVG animation (thats coded into the SVG file itself) to happen when the user scrolls down. I believe this is done by setting "begin: indefinite" on "" and then setting it to 0 with jquery/js when the user scrolls? Anything I have tried does not seem to be working so I was wondering if anyone can give me some better direction on how to accomplish this.
Setting the begin time of an animation element to "0" tells it to start immediately after the document loads. Since the document has already loaded by the time your user is scrolling, it won't have any effect at that point.
To trigger an animation element using Javascript, use the beginElement() or beginElementAt(delayInSeconds) methods. The first method starts the element immediately, the second starts after the specified delay. More info in the SVG specs.
window.addEventListener('scroll', function(e){
document.getElementById("animateOnScroll")
//.setAttribute("begin", 0); //this doesn't work!
.beginElement(); //this does!
});
http://fiddle.jshell.net/k95aZ/
I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.
I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.
Here is my problem:
In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.
What I'm trying to do is:
when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.
I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:
$(document).ready(function() {
$(".button").click(function(){
// PART 1
// move 3 divs to the left using transform: translateX(Npx) (no animation)
// move 2 divs to the left using transform: translateX(Npx) (no animation)
// PART 2
// slide 3 divs to the left using transform: translateX(Npx) (with animation)
// slide 2 divs to the left using transform: translateX(Npx) (with animation)
});
So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.
So my question is if these two transitions can be done under one event?!?!
I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.
What you need is:
Be sure you have a CSS position:relative; set on your divs so the animation can work.
Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward
You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.
I'd like to obtain the effect present on this site's top jQuery slider. You can see the little yellow square shapes indicating current slide position in the list get gradually smaller, shrinking upwards till they're gone and the slider changes image.
Here is a link with what I tried so far.
That is a neat effect :)
You need to combine what you have now with a child element in your LI parent element. When Slider fires, you animate the height of this element from 0 to 100 over 4000 MS and then have a callback which returns the height to 0.
ex:
$('.slider').animate({height: '100%'}, 4000, function() {
$('.slider').css('height','0');
});
Working here: http://codebins.com/bin/4ldqp9c/39
I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.
Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.