I'm using anijs to animate some content on my website when scrolling
http://anijs.github.io/
this is my code:
data-anijs="if: scroll, on: window, do: bounceInLeft animated, before: scrollReveal, after: removeAnim"
this animation should fire only once if the page is loaded
this should take care of that
after: removeAnim
but it's not working, the animation fires every time I scroll up and down
Ran into the same problem. Using holdAnimClass worked.
source: Hold animation after function
usage: after: holdAnimClass
had the same prob, animations re-running every time i scroll - didn't have anijs-helper-scrollreveal.js included in the page. added it and that solved the problem in my case
Related
In this fiddle I have a small div with an opacity animation.
The animation plays correctly when the state changes to true and the component is mounted
and the div fades in.
However the animation does not play when the component is unmounted when the state goes to false.
I have the animation set as both, and I tried also applying a reverse animation (from 1 to 0) but it just ends up playing right after the first one and I end up with no square.
How can I make this fade animation play in reverse when the component disappears?
Edit:
I did not mention this is done in React.
My solution eventually was to just use a library for animation, which made this efortless.
I'm leaving the question up though in case others have vanilla solutions to the problem.
I've found sort of a hacky way to solve this. You might find something better later on, but for now, this works.
I've created a class .hide which sets opacity to 0 and visibility to hidden, which will be added to the box. The initial insertion animation is the same. But for exiting, I've applied a transition property to the box. When you click a second time, I've wrapped the setVisible() method in a setTimeout(), that has a delay timing the same as the transition duration for .hide.
This will allow the box to fade out first, and then the setVisible() method will be called.
If you don't want to use a setTimeout(), you can add an eventListener to the box for transitionend, and then call setVisible() once that is done.
Here's a fiddle: https://jsfiddle.net/32y8vjus/1/
PS: In the fiddle, I'm changing the background color to show that the transition happens before the box is removed. You can change that to opacity.
My Problem:
In my project, there is an animated container (named .uebersicht) who brings in some divs with a scrollable list. The animation flips (thanks david walsh) between two different lists in my app. Because both of them should be scrollable I have to flip and kick away the flipped container.
I have simplified my markup and CSS and made a fiddle - but the fiddle is working correct :D (maybe a good trace...) So I put it on a hosting service.
site (scrolling not working): http://fiddle.bplaced.net/52426221/
fiddel (same code, works as expected): https://jsfiddle.net/58omteyL/5/
Nevertheless, for a better understanding I visualize my problem:
(if you wonder about the different containers, they are important for the rest of the app)
My approach works well on touch and mouse interaction but the Mac trackpad (like the one in a MacBook) and maybe (could not test this) the magic pad and magic mouse on Mac are just able to scroll the container every 2nd/3rd/4th time.
It seems that Safari 12.0 under MacOS 10.13.6 tries to scroll the wrong container (window-element).
Reproduce the bug:
check out the fiddle with a MacBook/MagicPad/MagicMouse
set
your system scrolling direction to not natural
point in the yellow container and scroll down
if this works (sometimes) move and click around (inside or outside the container) and try again
It seems that there is an area in the container where scrolling never works.
Why this is a SO Question:
You could argue that this is a Safari bug and nothing for SO. But when I'm using the animations from w3css (unfortunately there is no flip) scrolling works as expected.
Hints from the Comments here
When the div is scrolled to the top and you scroll up, the focus goes to the parent and you have to lift the fingers before you are able to scroll down
My trackpad setting is not natural (swipe down = scroll down) changing these setting to natural (swipe up = scroll down, this is standard) make my example work
When scrolling is blocked you can't even scroll with js using scrollTo etc. No scrolling event is fired
The question stays the same because I can not ensure that every user has the setting to natural and not not natural like me.
I have got the bug on: MacBook Pro (15-inch, 2016)
Safari : Version 12.0 (14606.1.36.1.9)
I have added overflow: hidden to HTML, BODY and seems working.
It might be related to locking the body while scrolling but not sure.
I can test it again if you update the code by adding
html,body {
overflow:hidden
}
It's very hard to reproduce and trace properly the issue, but what it seems to work on my Mac is to add overflow:hidden; also on the other two wrappers id="item1" and class="content". In that way the only thing that remains to scroll is the div you want to scroll. I think it could be worth to give it a try.
MacBook Pro (Retina, 15-inch, Early 2013) - OS 10.14.1 -
Safari version Version 12.0.1. - trackpad natural and not not natural
Hope this help.
Finally after a few good comments here I found a solution but it is more likely a workaround (thanks for your input).
I played around with some eventListeners, capturing and bubbling. It seems that the scrolling goes down to the scroll element (capture) but is not bubbling up again. Listen to the scroll event and scroll via JS in the right direction until DOM is unblocked was getting to complicated. But if I modify the style (position/size) of the scrolling element .styleWrap .scrollable the blocking was gone !
After that it turns out that it prevents Safari from any blocking when I modify this element after the animation was finished.
So my workaround is to make a style change and revert that after the CSS animation has been finished - and voilà :
function slide(slideName){
// scroll to top
scroll(0,0);
// show the Slide
var slideElement = document.getElementById(slideName);
slideElement.classList.add('show');
}
setTimeout(function(){
slide('item1');
// make a change to be able to revert this change
var scrollDiv = document.querySelector(".scrollable");
scrollDiv.style.top = "1px";
// change some style (reset the prev. change)
setTimeout(function(){
document.querySelector(".scrollable").style.top = "";
}, 1300 + 10); // CSS animation time + 10ms
}, 100);
Maybe this is the reason why the w3css animation does not lead into blocking...
You can test it here (I add more px to the topto make it more visible here): http://fiddle.bplaced.net/52426221g/
I'm not 100% satisfied with this solution because:
it is a CSS problem solved with JS
you need to know the animation timings (which can change with design)
Therefore I would like to change the accepted answer if there is a CSS solution
I am a newbie to javascript programming, but am making progress! I am developing a web app in house for children with autism, for touch screen browsers (55" touch screen PCs and Nexus 7 tablets). We will only use Firefox as it appears most compatible. The children will click on image "buttons" to make choices and to communicate their needs. The buttons need to give visual feedback when touched. I have solved this by using the active state in CSS:
img { opacity:1.0 };
img:active { opacity:0.4 };
This works fine. Hover is no good for use on touch screens. I also have a need for some images to be made invisible but to remain where they are, and to toggle on and off on a long press. For this I have found a toggle function and a timer function and combined them.
JAVASCRIPT (in <head> of page):
var t
function tog_vis(id) {
var e = document.getElementById(id);
if(e.style.opacity == 1 )
e.style.opacity = 0 ;
else
e.style.opacity = 1 ;
HTML:
<img id="myimg" onclick="DoSomething();" onmousedown="t=setTimeout(function(){ tog_vis('myimg'); }, 1500);" onmouseup="clearTimeout(t);" src="images/img1.png">
Problem is the active state gets taken over by the onmousedown and onmouseup events (I have read that this is because they are both part of the click event - makes sense!), and I am guessing that the onclick event may also mess things up further.
Expected/Desired behaviour:
1.On a normal click, the image changes opacity to 0.4, and when released returns to 1, then completes the onclick request.
2.On a long click, the image opacity goes to 0, and on a second long click the opacity returns to 1, with NO onclick event.
The app will eventually have # 100 similar images that must perform the first behaviour, whilst the second behaviour will only be needed on # 10 buttons so I could happily code functions individually if necessary. I have also found that the 55" touchscreens (Windows 7) are not responding to the img:active CSS, so guessing these are relying on the touchdown and touchup events, whilst the tablets are very well behaved.
Any help here much appreciated.
Tim
You could you css3 transitions and a little javascript for this use case. Have a look at this fiddle: http://jsfiddle.net/Ce8J5/
Also you could realise the hover with javascript/jquery, just remove the hover css statement and define some addionatial css classes and add them via javascript.
E.g.
$("#element").mouseenter(function(){
$(this).addClass(".hover");
});
$("#element").mouseleave(function(){
$(this).removeClass(".hover");
});
I've got a scroll path event occurring when I reach this point in the site's destination. As you can see from the following code, when a user travels to this specific point, "my work," the div "#mywork" fades in, (as it's css is originally set to display:hidden.)
path.lineTo( 3220, 4600,{
callback: function() {
$("#mywork").fadeIn(2000, "linear");}, name: "mywork"});
I would like the "#mywork" div to fade out whenever the user leaves this point (i.e. scrolls away from it, and/or clicks on a different navigation link.) If the user returns, I would like for the div to fade back into view as it normally would.
Any suggestions? Thanks so much in advance if you can find the time to help me.
I think this library can help you out. You'd use it in place of path.lineTo.
https://github.com/sakabako/scrollMonitor
I've got a simple fiddle running a Tween animation using MooTools Fx.Tween and I can't seem to get the onComplete option to fire after the initial animation stops. For whatever reason, it always wants to fire in the middle. What am I doing wrong?
Fiddle
It seems you're doing it right.
I think there's a problem (basically, a 'conflict'.. you can use css transition OR js animation, not together) with -webkit-transition: all 1s linear 0 inside #bar . By commenting/removing it, it's working properly -> http://jsfiddle.net/vPuAR/