hello, i'm new here and to the bootstrap studio.
i'm trying to do on scroll animation using the built in functions in bootstrap studio. when i use 'on-scroll' animation, it seems to do the animation only when the page is loading (on-load) and not when actually scrolling. is it a bug or i'm doing something wrong? thank for replying.
p.s i'm aware that animation works only on desktop browsers and not on mobile devices. and the function checked on three different browsers.
How long is your page? If it's not long enough to warrant the scrolling of it then yes, it's going to seem like it's "onload". Be sure your page is long enough to really take advantage of the onscroll setting. :)
thank you for your answer.
what i'm trying to do is when i scroll down the page (to section 2), i want the elements on the previous page to animate away. is there any way to do it avoiding code?
hmm I don't think that's what the onscroll is set up to do at all really (I could be wrong here so don't shoot me lol).
When I use the onscroll it's usually to have something happen to the items below, not above. Not sure how to do it the way you're talking about.<br /> If you're having it scroll to section 2 and you put the anchor it's scrolling to in the right position so that the beginning of it is at the top of the page fully, why would it matter if the items above it animate away? Just curious as to your ideas on it I guess.
BSS uses the Animate On Scroll library which does not support scroll-out events. It's not too hard to fade out an element (see example) but animating out is more difficult. There are probably some animation libraries that could do it, but I'm not familiar enough with any to recommend.
https://codepen.io/nickcil/pen/sfutl
yes, the on-scroll animation are for animation of the objects below, but i like those kind of animation to function as on-load also (i check trigger them one time) and not the original ones that their animation not for my taste.
i'm sure there is a way to manipulate this animations code to suite for after scroll, but i can't seem to find a way to open this code on editor like visual code. it seem that all the js and css file wrapped inside the .bsdesign file. if any one knows a way, it will be great.
on the functioning level, i'm trying to achieve something reassemble to this example site:
https://crypton.trading
i'm not sure of my design skills though :)
You will probably have to use an external animation library like animejs.com which should be able to do what you want.
Omg lol, that's the most annoying site I've seen in quite some time. Not sure why you'd want to do that, it's a very irritating way to visit a site unless you have actual reasons for them to have to click a billing times or scroll fractions of what should be scrolled making it even take longer.
If that was a site I was visiting for some reason or another other than just checking it out from your link, I would leave it within a few seconds as I just did. Just my opinion, but I don't think you'd be doing your visitors any favors by doing that to your site.
i don't agree. i think this site is well designed and well implemented. although, i agree that there are to many screens. i t's not my favourite best site, but it is a good site to my opinion.
as for myself, i'm far more modest about my skills. i just want a bit of animation to make it a little bit interesting.
I 100% agree with Jo. That site is a UX nightmare. I wouldn't stay on that site more than a second unless I had to.
Animated elements on a website should be used sparingly, and only to draw a user's attention to something relevant. Otherwise, they're just a distraction. Animation is the current "darling" of web designers. It's trendy, but it won't last because it does little to improve the user experience. I've seen many of these fads come and go... parallax scrolling, flash effects, animated gifs, skeuomorphism, massive, full-screen background videos that slow page loading, pop-up windows (and now pop-over modals.)
Users hate anything that slows a site down, or complicates the process of finding what they're looking for. Unless the novel features are specifically to function as an artistic example, the KISS rule (keep it simple stupid) should apply to web design.
Sometimes animation is the way to go. Customers love it. And my paycheck depends on my customer satisfaction. To better control animate.js and get the best out of it it's necessary to use it directly and not via the options panel. So link to css and js, initialize it, add the classes and set all options manually.
Same for smoothscroll that I use a lot on #internal links.
That's quite easy to do, once you learn it. I'm not a fan of the new "panelized" libraries. I prefer to link to cdnjs files and manually set my preferences.
Maybe @martin could develop a better interface to do that. I know that's basic HTML and js website building, but many users here don't seem to be able to do that.
yes. i absolutely agree with i your comment. i already implemented animation via css and js linked, but i managed to find only on scroll animation to objects ahead. now i'm trying to find animation lib that can animate out objects as i scroll off the page, and i can't seem to find one.
i'll appreciate if anyone here can give me a direction to this kind of animation lib.
@boo-zi
I guess you missed my above post. animejs.com can do what you want. Scroll down page to Controls and Callbacks. https://animejs.com/
@boo-zi
I appears that this plug-in does the exact sort of reverse scroll animation you are looking for.
http://jackonthe.net/css3animateit/
...and that plugin is included in cdnjs : https://cdnjs.com/libraries/css3-animate-it
so you can easily use it, just linking and initializing it
thank you all very much. i will try those suggestion.
Discovered this purely by accident - being interested in parallax --- can't believe in that Crypton page. I learnt to code way back when scrolling marquees were all the go - for a very brief while - emphasis on the "very brief" -- now with more gimmicks, it's the gimmicks people are letting dictate the page. What's the point?! Unless it's being used to make a point that can't be made better with something else, only then do it, in very small amounts. The performance cost of such a design would drive the majority of people -- customer or ordinary web users nuts ;-D