Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Zuriel

GSAP Mouse Driven Parallax 3D scene with working example

Recommended Posts

 cx = Math.ceil($('body').width() / 2.0);
        cy = Math.ceil($('body').height() / 2.0);
        dx = event.pageX - cx;
        dy = event.pageY - cy;

        tiltx = (dy / cy);
        tilty = - (dx / cx);
        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
        degree = (radius * 20);

        $('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

how would you write the picture.css using rotateX and rotateY and make it work in firefox?   can rotate3D type webkit transitions be converted somehow.  i know you can just animate the above line for webkit but i am wonder if firefox can get love too

Link to comment
Share on other sites

Normally you control 3D rotation in GSAP with rotationX, rotationY, and rotationZ, but the css rotate3d() is a bit different because it is for creating a vector and then rotating around that vector. You could try something like this:

 

//OLD:
$('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

//NEW:
TweenLite.set("#picture", {transform:'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'});

Let us know if that works okay for you. 

Link to comment
Share on other sites

Here is a working jsfiddle of the demo.  tested on firefox and safari.  looks cool!  going to use it in a project!

 

http://jsfiddle.net/Zuriel/qGcd9/

 

 

I notice that when i rotate to far to the right it clips into my view and the whole image vanishes.  i wonder if that is because of my demo or if it has a issue that needs fixing.  Otherwise it looks pretty good and I am happy ;)

  • Like 3
Link to comment
Share on other sites

This is AWESOME! I had a problem with rotationY, which looked steppy, now this is solved, THANK YOU!

Link to comment
Share on other sites

This can look quite a bit nicer in Firefox by adjusting .hello's style to

-moz-transform: perspective(1000px), rotation(0.001deg);

Firefox clings very tightly to integer pixel positioning for a lot of transforms, but the imperceptible rotation somehow triggers sub-pixel positioning and anti-aliasing.

Link to comment
Share on other sites

what exactly does the above code make nicer?  the animation, rotation, or adding anti-aliasing? I know that I already used one trick of a 1px transparent border that gives perfect anti-aliasing in firefox already.  but i'll check it out anyway and see what the secret sauce is all about.

Link to comment
Share on other sites

When I looked at it, Firefox was doing a horrible job rendering it (I'll see if I can get a screenshot later). I tried the rotation trick (didn't know about the transparent border one though - thanks for that) and the anti-aliasing kicked in.

 

Hmm this was on my work pc though (should have been latest Firefox...), and I just checked here at home and you are right; it looks great without needing the rotation. Very strange. I'll see if things are the same at work tomorrow.

Link to comment
Share on other sites

i am on a PC right now and it looks terrible in firefox.  it isn't anti-aliasing that is the problem.  its that the animation is jumpy.  it looks like its scaling up and down at a fast rate as its trying to animate.  when I apply your fix to it, it fixes the smoothness of the animation (not rapidly scaling or jumping) but it blows the perspective away so that everything looks isometric.   Does anyone know why that is?

 

-moz-transform: perspective(1000px), rotation(0.001deg);
Link to comment
Share on other sites

I noticed that the ,rotation code in CSS isn't actually doing anything.. in fact, what its really doing is making the moz perspective tag invalid.

 

i can generate the same effect by just removing perspective completely.  it fixes the smoothing, but it makes the perspective 0.  I wonder if there is a solution to fix it that we can generate in the tween rather than in the css.

 

also.. check it out! 

 

http://jsfiddle.net/Zuriel/qGcd9/

 

i made it super super sexy.  I figured placeholder images were just not appropriate for cool 3D effects.

  • Like 1
Link to comment
Share on other sites

Hmm yea I guess I wasn't paying enough attention to notice the change in perspective. Also I had the combined css transforms wrong... there is not supposed to be a comma separator (not that that fixes the problem).

 

It was definitely smoothed by default when I checked at home last night though. Both PCs are on Windows 7 with latest Firefox. Work PC has ATI Radeon HD 3450, home is NVIDIA GTX570. I wonder if this is a case of Firefox picking and choosing whether to step up to hardware accelerated transforms based on GPU power or brand?

 

p.s. those new images definitely make it super sexy, nice job!

Link to comment
Share on other sites

Nice work Zuriel. The new images and text effects really make it pop. Awesome!

Link to comment
Share on other sites

  • 3 years later...

just wanted to do something similar to the Zuriels demo - I have noticed the performance is bad in MS Edge browser (FPS dips way below 30 many times).

 

I modified to check if it was the 3d transformations - but here it runs smoothly: http://jsfiddle.net/qGcd9/388/

 

So I guess it is either TweenMax.set og the mouse event that chokes IE ... I mean Edge :)

 

Any suggestions for a better Edge friendly approach?

Link to comment
Share on other sites

... answering my own problem.

 

If I wrap it with requestAnimationFrame() it works smoothly now.

http://jsfiddle.net/qGcd9/389/

 

If there are other suggestions on the approach I'm all ears :).

 

Also the "mousemove" performance is back in IE 11 - though there is no nesting 3d ( no transform-style: preserve-3d; )

Link to comment
Share on other sites

Actually, running requestAnimationFrame like that is bad as you could be queuing up a bunch calls on the next frame. You need to make sure there isn't an active request already.

http://jsfiddle.net/OSUblake/eryrhrn7/

  • Like 2
Link to comment
Share on other sites

Perfect - makes sense! Thanks!  :-P

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×