grantambrose
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by grantambrose
-
-
Box Flipping
in GSAP
Hi,
I would set a common class for every box and give an active class to the one that is currently flipped. Then if the user click/touch another reverse the active one's animation, remove the active class, add the active class to the click/touch target and play that animation.
I set up this codepen for another thread but the concept is the same:
See the Pen JdwKKq by rhernando (@rhernando) on CodePen
Ok great, I worked it out.
I tried Rodrigo's example but I am not familiar enough with the code to work out what the loop is doing so I had to manually add each element's tween and reverse etc. A bit messier but works.
What does the below code mean?
jQuery(".partner-10")[0].animation
-
Box Flipping
in GSAP
Hi,
In that case the best way is to check the current reversed() state of the animation and using a ternary operator play or reverse the animation. The only thing you need to add is instantiate the timeline with the reversed state set to true, like this:
travelerstl = new TimelineMax({paused:true, reversed:true}); travelerscol.click(function(e){ if(Modernizr.touch){ e.stopPropagation(); this.animation.reversed() ? this.animation.play() : this.animation.reverse(); } });
Like that you're toggling the animation on touch screens.Hi guys,
Just building on this. On a tablet, it seems that when a user clicks and a box fips over, to make another box flip over they need to click off this box so it rotates back to its front face, then the user must click on the box again to make the next box rotate
http://chinaready.mywebone.com/program/businesses-and-organizations
How can I make it so that if BOX A back is showing, and they click on the Front of BOX B, BOX A flips back to its front and BOX B flips to its back, all with the one click?
-
Box Flipping
in GSAP
Hi,
In that case the best way is to check the current reversed() state of the animation and using a ternary operator play or reverse the animation. The only thing you need to add is instantiate the timeline with the reversed state set to true, like this:
travelerstl = new TimelineMax({paused:true, reversed:true}); travelerscol.click(function(e){ if(Modernizr.touch){ e.stopPropagation(); this.animation.reversed() ? this.animation.play() : this.animation.reverse(); } });
Like that you're toggling the animation on touch screens.Great, that worked and I now when what that expression means. Ternary Operator
-
Box Flipping
in GSAP
okay silly mistake by me. Modernizr needed a capital R
Thank you for your reply. I was able to solve what I needed with the below
jQuery(travelersfront).click(function(e){ if(Modernizr.touch){ travelerscol[0].animation.play(); } }); jQuery(travelersback).click(function(e){ if(Modernizr.touch){ travelerscol[0].animation.reverse(); } });
-
Box Flipping
in GSAP
Hi,
What you could do is detect a touch event in your main container, which will be the div with the site-container class, and on that event reverse the animation. Of course you'll have to prevent the touch event from bubbling up the DOM in the blue box, because that would reverse the animation as soon as it starts. I saw you're using modernizr, so you can bind a click event (I've seen a lot of consistency between jQuery click() and touch events in several devices) in the outer container and using modernizr you can check if the user is in a touch screen and then call the reverse. If the animation is already reversed it won't have any effect whatsoever, so you're covered there.
jQuery(".site-container").click(function(e){ if(modernizr.touch){ travelerscol[0].animation.reverse(); } }); // now the click event on the element travelerscol.click(function(e){ e.stopPropagation(); });
Give that a try an let us know how it goes.Ok awesome when I click on the site-container it flips back.
How can I make it so that when you click back on the box it flips back, also? I tried the below
jQuery(".welcome-signs .col-sidebar").click(function(e){ if(modernizr.touch){ travelerscol[0].animation.reverse(); } });
-
Thank you!
I had not thought of that.
-
Hi there,
On page load I am trying to fade in the body and then once this completes all my other animations start. I have this working, but on page load the page shows very quickly and then hides as per my TweenMax.set
An example URL is here
http://chinaready.mywebone.com/marketing
At the above URL I have resorted to placing inline CSS right at the start of the page to hide the body so that it doesnt flicker but I am just concerned that hiding it with CSS and then animating it in with JS may not be the best as it is relying on JS to solve the issue? Or is this OK to do?
See the Pen by marketing (@marketing) on CodePen
-
Box Flipping
in GSAP
Hi guys,
Just doing my first site with GSAP and have the following URL
http://chinaready.mywebone.com/marketing
On the right hand side mid-way down the page there is a blue box next to "a welcome sign for Chinese travelers" which, when you hover or click, needs to flip and on hover exit / click again the box needs to rotate back to its resting side.
The hover works for me on desktop, and on touch devices the box flips. But I cannot get it to flip back on touch again, or when you click away from the box. The JS code I have used is below.Could someone please help me with (on touch again) flipping the box back over.
jQuery(document).ready(function(){ var travelerscol = jQuery('.welcome-signs .col-sidebar'); var travelersfront = jQuery('.welcome-signs .col-sidebar .front'); var travelersback = jQuery('.welcome-signs .col-sidebar .back'); TweenMax.set(travelersback,{rotationY:-180}); TweenMax.set([travelersfront, travelersback],{transformStyle:"preserve-3d", backfaceVisibility:"hidden", perspective: 800}); jQuery.each(travelerscol, function(i,element) { travelerstl = new TimelineMax({paused:true}); travelerstl .to(travelersfront, 0.4, {rotationY:180}) .to(travelersback, 0.4, {rotationY:0},0); element.animation = travelerstl; }); jQuery(travelerscol).hover(elOver, elOut); function elOver() { this.animation.play(); } function elOut() { this.animation.reverse(); } });
See the Pen by marketing (@marketing) on CodePen
Box Flipping
in GSAP
Posted
okay great, thanks. I get what you mean but obviously playing around more will help me further.
Thank you for your efforts. I didnt even know jQuery returned objects etc!