How to improve this animation? - javascript

I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it

As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.

Related

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.
Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

will CSS transitions override each other?

I have two col-md-6 class and each contains a button in it, upon clicking, im using jQuery to toggleClass() of one between col-md-6 and col-md-12 and hide/show the other. I also use CSS transition to animate the toggling, but it would work for one class and if I click the other button, the transition is not working.
Does multiple class selector cause issue with transitions?
.hello, .bye{
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
Here's the problem in jsfiddle
Your question is a little vague, so I took it upon myself and made some necessary changes to your code, so that the end result will resemble a lot what you (most likely) have in your mind.
CSS Notes:
To avoid having #btn1 and #btn2 overflow .hello and .bye respectively, you need to use overflow: hidden.
To avoid having .hello and .bye wrapping during the transition if there's not enough room for both, you need to use: padding: 0.
If you want your buttons to remain at the exact position they were (15px indented), use: margin-left: 15px.
CSS Code:
.hello,
.bye {
padding: 0;
overflow: hidden;
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
#btn1,
#btn2 {
margin-left: 15px;
}
JS Notes:
Your code is kind of inefficient as you basically repeat the same code over and over, so I created a function for you that can be used for both buttons.
JS Code:
Check out the full JavaScript code in the following:
Codepen: → here;
jsFiddle: → here;

does div:after content actually modify width? My transition isnt working with it

Quick code (Not my actual code but it represents it):
#myDiv {
background: black;
color:white;
float:left;
min-width:45px;
max-width:450px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
I know this question might be too tricky because selectors are elements apart (or something like it, I havent gotten too deep into the subject), but I need help finding a work around for this (Javascript welcomed, JQuery too: I would rather not though, since Im not too friendly with heavy libraries for small things), if anyone has time its much appreciated.
If you want to see what Im trying to achieve, comment below and ill post my actual code.
The problem is that transition doesn't work when you go from or to a property with auto. Check this out Transition to and from position Auto
You can do some workaround to achieve what you want e.g:
#myDiv {
background: black;
color:white;
float:left;
width:45px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover{
width: 450px;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
But that depends on your markup and your needs so if this not helps, you can add more details to your question or best add your real code.

Animating CSS by transitions when a class is added to an element

I'm using the Foundation framework on a project & it's Top Bar feature for navigation allows for drop-down navigation to appear on hover.
During the hover event it adds a .hover class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.
This got me thinking. Is it possible to animate (via transitions or similar) the changes in CSS definitions?
Take this example. Here is our default element:
<div class="a-box">Some content</div>
And it's default CSS:
.a-box {
width: 200px;
height: 200px;
background: red;
}
On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the hover class. Making our element now look like this:
<div class="a-box hover">Some content</div>
Here could be some CSS for the hovered element:
.a-box.hover {
width: 400px;
// I thought perhaps adding the following would work but it doesn't appear to
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.
You aren't far off the mark, here is a working example.
The main error in your example is that you have
<div class="my-box hover">Some content</div>
But your CSS is looking for a-box not my-box.
As a habit, I normally define the animation on the simplest (most general) selector for the element and then any additional selectors will benefit from it.
.my-box {
width: 200px;
height: 200px;
background: red;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
.my-box.hover {
width: 400px;
}

DIV equivalent HTML5

I am trying to redo the a tutorial I had posted links to in previous question to have as much HTML5 and CSS3 code. I read in some online article's that in HTML5 they are trying to get rid of the idea of Div tags, rather they are pushing for something known as section. Is that a correct observation. For example I have this section of code from the above tutorial.
https://skitch.com/android86/r67ey/dreamweaver
and what I am interested to know if I should be using div tags in my HTML5 code as well or is there a better way to do it rather than using Div's?
What I have in my HTML5 code at present is the following.
https://skitch.com/android86/r67ej/dreamweaver
Thanks for the group's valuable input.
a proof of concept for a sliding link over content (with display: block) on hover, using CSS3 transitions only.
NOTICE: this is a webkit (safari & chrome) only syntax, for the syntax for the rest of the browsers go here: http://css3.bradshawenterprises.com/transitions/
a simple element, with the following style:
a {
z-index: 100;
position: fixed;
-webkit-transition: all 1s ease-in-out;
display: block;
background-color: black;
width: 100%;
height: 500px; }
and the hover state style:
a:hover { height: 700px; }
The code submitted looks good, however I would include the extra lines to cover Firefox and Opera.
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
You can then use Modernizr (http://www.modernizr.com/) to cover all browsers with backup Javascript.
I would use something like this:
a.slideDown {
z-index: 100;
position: fixed;
display: block;
background-color: black;
width: 100%;
height: 500px;
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
top:5px;
}
a:hover.slideDown {
top:495px;
}
If you are including CSS3 as part of HTML5 (which you have to to allow animation!), have a look at: http://css3.bradshawenterprises.com/sliding/ . The jQuery isn't necessary, you could use the :target pseudo element instead.
For your case, just set a transition on the element, then change the height, or top value using the target selector.
It's probably around 4 lines of code if you only want it to work in newer browsers.
I'd agree with the comments about using CSS3 for transitions. I used this on a portfolio site and it looks fairly good. It's just a couple lines of code and if the browser doesn't support the transitions it will still display the content on hover, just without the animation.

Categories

Resources