"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript.

If you would like to take a look at the code and see a working example, please visit this link:

You can also view just the gist here: https://gist.github.com/1654665

At the moment, the open and close animations are combined within the same keyframe sets for simplicity. Once I resolve the issue of triggering the fold+unfold effect on click, I will work on splitting it into two separate animations.

I have attempted using jQuery's animate function, but it does not seem to recognize the rotate and translate CSS3/webkit properties. I also experimented with moving the animation-name property to an .unfold state and using jQuery to set 

$("#stage").toggleClass("do_animation");

#stage.do_animation #topfold{
  animation-name: topfold;
}
#stage.do_animation #bottomfold{
  animation-name: bottomfold;
}
#stage.do_animation{
  animation-name: collapse_expand;
}

I have some other approaches in mind that I plan to try out. However, I decided to reach out and ask for advice as many of you may have more expertise in this area.

Lastly, if anyone is interested in collaborating with me to refine this animation for easy integration in hiding/showing various types of content, I welcome your partnership. The animation is inspired by the one used to expand quoted text in OSX Mail, and I am determined to elevate it to that level of excellence.

javascriptjquerycssanimationwebkit

Answer №1

Response available upon request.

For additional information, please refer to the provided fiddle.

(I initially used 2d-transforms in my current version.. this was done before coming across this inquiry) however, it could be beneficial.. http://jsfiddle.net/pixelass/a74Eu/32/

Currently developing a jQuery plugin for this purpose.

Below is the snippet of jQuery code (refer to the fiddle)

$(document).ready(function() {
    var button = $('button#folder'),
        buttonSet = $('button#setter'),
        fold = $('.wrapper'),
        odd = $('.wrapper .part:nth-child(1)'),
        even = $('.wrapper .part:nth-child(2)'),
        gVal = $('input.perc').attr('value') / 25,
        hVal = $('input.heig').attr('value'),
        shadHeight = hVal / 2,
        closed = false;

    buttonSet.click(function() {
        gVal = $('input.perc').attr('value') / 25;
        hVal = $('input.heig').attr('value');
        fold.find('.part').css('height',hVal + 'px');
        shadHeight = hVal / 2;
    });
    button.click(function() {

        var rePos = hVal / 4 * gVal,
            rePosWrap = rePos * 2,
            newDeg = 90 / 4 * gVal,
            newScal = 1 - (1 / 4 * gVal);
        if (closed) {
            button.text('fold');
           fold.css('-webkit-transform', 'translateY(0px) translateX(0px)');
           odd.css('-webkit-transform', 'skewX(0deg) scaleY(1)').css('box-shadow','-4px 4px 4px rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0) inset, 0 0 0 rgba(0,0,0,0) inset');
           even.css('-webkit-transform', 'skewX(0deg) scaleY(1)').css('box-shadow','-4px 4px 4px rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0) inset, 0 0 0 rgba(0,0,0,0) inset');
            $(".partwrap").each(function() {
                $(this).css('-webkit-transform', 'translateY(0px)');
            });
            fold.toggleClass('close');
            closed = false;
        } else {
            button.text('unfold');
            fold.css('-webkit-transform', 'translateY(-' + rePos + 'px) translateX(' + rePos + 'px)');
            odd.css('-webkit-transform', 'skewX(' + newDeg + 'deg) scaleY(' + newScal + ')').css('box-shadow','-4px 4px 8px rgba(0,0,0,0.2), 0 ' + shadHeight + 'px ' + shadHeight + 'px rgba(111,111,111,0.2) inset, 0 -' + shadHeight + 'px ' + shadHeight + 'px rgba(255,255,255,0.2) inset');
            even.css('-webkit-transform', 'skewX(-' + newDeg + 'deg) scaleY(' + newScal + ')').css('box-shadow','-4px 4px 8px rgba(0,0,0,0.2), 0 ' + shadHeight + 'px ' + shadHeight + 'px rgba(111,111,111,0.2) inset, 0 -' + shadHeight + 'px ' + shadHeight + 'px rgba(0,0,0,0.2) inset');

            $(".partwrap").each(function() {
                var goUp = $(".partwrap").index(this) * rePosWrap;
                $(this).css('-webkit-transform', 'translateY(-' + goUp + 'px)');
            });
            fold.toggleClass('close');
            closed = true;
            console.log('-webkit-transform', 'skewX(' + newDeg + 'deg) scaleY(' + newScal + ')');

        }
    });
});​

Answer №2

One effective way I have found to initiate css3 animations is by setting the base state of the animation in your stylesheet, where you define css3 animation properties.

#element {
   initialStateofCSS3Animation;
}

You can then easily activate them with something like this...

$(element).click(function() {

$(element).css(newStateofCSS3Animation);

}

I typically use this technique when I want the entire div to trigger the action, rather than just specific text or images with anchor tags.

Answer №3

I made some adjustments to the CSS code like so:

/* Updated Fold/Unfold animation
Now includes gradients and expanding container!
*/
body { margin-top: 200px; }

@keyframes topfold {
  0%  {
    transform: rotateX(0deg);
  }
  50%  {
    transform: rotateX(-90deg);
    box-shadow: inset 0px 100px 100px #AAA;
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}

@keyframes bottomfold {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: translateY(-120px) translateZ(-120px) rotateX(90deg);
    box-shadow: inset 0px 100px 100px #CCC;
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes collapse_expand {
  0% {
    height: 240px;
  }
  50% {
    height: 0%;
  }
  100% {
    height: 240px;
  }
}

#stage {
  perspective: 400px;
  perspective-origin: 50% 0%;
  /*background: rgba(0,0,0,0.5);*/
}
#stage.test{
  animation-name: collapse_expand;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

.fold {
  margin: 0px;
  height: 100px;
  padding: 10px;
  /*border: 1px dashed black;*/
}

p {
  color: #333;
  font-family: HelveticaNeue-Light, Helvetica;
  font-size: 16px;
  font-weight: lighter;
  line-height: 20px;
}

#stage.test #topfold {
  transform-origin: 0% 0%;
  animation-name: topfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}   

#stage.test #bottomfold {
  transform-origin: 0% 0%;
  animation-name: bottomfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

Next, in the JS section, I implemented:

document.getElementById('#stage').className = 'test';

This adjustment successfully resolved the issue for me. Therefore, the final solution would be:

var stage = document.getElementById('#stage');
stage.onclick = function(e){this.className = 'test';};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

javascriptjqueryhtmlcss

Determining the dimensions of form elements in an inline layout using Bootstrap 3.1

Currently in the process of upgrading my application from version 3.0 to 3.1. The application is still in its initial phase, resembling more of a prototype with only a few pages created. Therefore, I didn't anticipate encountering many issues during t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascripthtmlcss

Troubleshooting VueJS's Dilemma with Quotation Marks

When I try to parse a string containing either double quotes or single quotes, an error is being thrown: JSON Unexpected token. Is there a way to properly parse and bind it to a variable in Vue.js? PHP $arr = array(); $arr[0]['description'] = ...

javascriptvue.js

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss

Error: The function pajinate is not defined for jQuery([...])

I'm currently experiencing difficulties with the jQuery Pajinate plugin after migrating to a new host. The script was functioning properly on my previous hosting platform, but now I seem to be encountering some problems. Below is the code snippet: ...

javascriptjquery

Having trouble creating an angularjs table using ng-repeat in the controller?

I have a sample snippet that I would like to discuss. My goal is to display a JSON object in an angular table using ng-repeat, which is being generated from my angular controller script. I have attempted the code below, but for some reason, the table is no ...

javascriptangularjsjsonangularjs-ng-repeat

Check to see if the moment function has been executed and if the resulting output is accurate

I have a function called moment that formats a date received from the server in milliseconds. I am attempting to write tests using Enzyme and Jest to check if the moment function has been called (1), and whether the output of the function matches the expec ...

javascriptreactjsunit-testingjestjsenzyme

Connecting a picture to a web address using the <img class> tag

I'm facing a major issue with the "fade script" I added to my portfolio. It's designed to fade between thumbnails using jQuery and CSS, but it relies on 2 img classes that I can't seem to link properly. Basically, I want to link the image g ...

jqueryhtmlcssimage

Modify the td attributes while retaining the extracted data values from the website

I'm currently utilizing this code to extract data from another website: $searchURL = "http://www.anotherwebsite.com"; $html = file_get_contents($searchURL); $patternform = '/(<tbody.*<\/tbody>)/sm'; preg_match_all($patternfor ...

javascriptphphtmlregex

Having trouble with QuickBlox video calling feature on the web?

I have encountered an issue while trying to integrate video chat into my Java web application using QuickBlox. I am utilizing Angular/JavaScript on the frontend. The problem arises when attempting to create a session for a user that I have created in Quic ...

javascriptjavawebquickblox

Activate the mouseenter event as soon as an animated element makes contact with the cursor

As I venture into the world of web development, I am currently working on creating a game where the main objective is to avoid touching moving circles with the cursor. My approach involved using a mouseenter event as shown in the JSFiddle example below: $ ...

javascriptjqueryhtmlcssanimation

Vue 3 - Using Emit Functionality in a Reusable and Composable File

I'm trying to utilize the emit function in my file called useGoo.ts import Swal from "sweetalert2/dist/sweetalert2.js"; export default function useModal() { const { emit } = getCurrentInstance(); function myId() { emit('id&ap ...

javascriptvue.js

implementing nested key property specifications in React

Is it recommended to explicitly set the keys for the children of components when using arrays of Components? I understand that when using arrays of Components the key property is assumed to be the index of the array and should be explicitly set. {arr.ma ...

javascriptreactjs

Failure to correctly apply CSS to Angular custom components causes styling issues

I have been working with a custom component and I have incorporated several instances of it within the parent markup. When I apply styles directly within the custom component, everything works as intended. However, when I try to set styles in the parent co ...

htmlcssangularasp.net-core-2.2

The HTML document is unable to locate the Angular framework

I'm encountering an issue with the code below on my HTML page - every time I run it, I receive an error message saying "angular is not defined". I've already included angular in the head section of the page so I'm puzzled as to why it's ...

javascriptangularjs

Maintain Bullet and Arrow Size with JSSOR Scaling Feature

I am currently utilizing the jssor image slider with jquery and overall, it is functioning well. However, I have encountered an issue when attempting to resize the slider. My goal is to dynamically resize the slider whenever the window width changes. The ...

javascriptjqueryjssor

Is there a way for senders to also view their own messages using socket.io?

Using socket.io, I am trying to send a message to a specific user based on their socket.id, and also ensure that the sender can see their own message. The code snippet I am using for this is: socket.to(msg.id).emit('chat message', msg.message);, ...

javascriptnode.jssocket.io

Understanding how to efficiently map through FontAwesome icons using React TypeScript and effectively showcase them on the frontend

I am in the process of developing a versatile component that allows me to input the href, target, and rel attributes, along with specifying the FontAwesome Icon I want to utilize. My goal is to be able to pass multiple icons into this list, which will then ...

javascriptreactjstypescriptfont-awesome

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid