Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bg-scro

Rotation not working in Chrome or Safari browsers with Jekyll

Recommended Posts

I'm mystified. Attempting to animate an arrow so that it rotates through various points on a circle. The codepen seems to work perfectly: the arrow rotates smoothly to the number of degrees set, then rotates back to 0. However, the behavior isn't working properly in Chrome browser. The arrow rotates approximately 30 degrees, seems to bounce back from that limit, rotates to negative 30 degrees (i.e. ~330), overshoots back to ~+10 deg, before returning to 0.

 

On Safari the arrow rotates to about 60 degrees before returning to 0. 

 

Both browsers behaving very differently despite running the same script served from the same server. I'm running this with Jekyll on localhost. 

 

I have a GIF of the Chrome behavior here (file is too large to upload on this site).

https://s3-us-west-2.amazonaws.com/miscellaneous-shares/chrome_gsap_animation.gif

 

Appreciate any insights or hacks on why this is happening.

See the Pen GpaNpw by bg-scro (@bg-scro) on CodePen

Link to comment
Share on other sites

Hello bg-scro, and Welcome to the GreenSock Forums!

 

I would just make that first rotation a relative value using "+=" or "-=". So instead of a rotation of this  "220_cw",  you would do this for rotation: "+=220_cw".

 

See the Pen KdLaWy by jonathan (@jonathan) on CodePen


 

needleSpin.to(needle, 1, {rotation: "+=220_cw"}) /* make this a relative value += */
.to(needle, 1, {rotation: "0_ccw"});

a

Taken from the GreenSock CSSPlugin Docs:

  • directionalRotation

    Tweens rotation in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example, if the element's rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use the _short suffix, it would travel 20 degrees in the clockwise direction instead. Example:

    TweenLite.to(element, 2, {rotation:"-170_short"});

    //or even use it on 3D rotations and use relative prefixes:
    TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});

    Notice that the value is in quotes, thus a string with a particular suffix indicating the direction (_cw, _ccw, or _short). You can also use the "+=" or "-=" prefix to indicate relative values. Directional rotation suffixes are supported in all rotational properties (rotation, rotationX, and rotationY); you don't need to use directionalRotation as the property name. There is a DirectionalRotationPlugin that you can use to animate objects that aren't DOM elements, but there's no need to load that plugin if you're just animating css-related properties with CSSPlugin because it has DirectionalRotationPlugin's capabilities baked-in.

    Check out an 

    See the Pen jiEyG by GreenSock (@GreenSock) on CodePen

    .

    Prior to version 1.9.0, directionalRotation was called shortRotation and it only handled going in the shortest direction. The new directionalRotation functionality is much more flexible and easy to use (just slap a suffix on the regular property).

Does that help? :)

Link to comment
Share on other sites

The codepen seems to work perfectly: the arrow rotates smoothly to the number of degrees set, then rotates back to 0. However, the behavior isn't working properly in Chrome browser.

 

I'm a little confused. I checked the CodePen in Chrome and Safari and it appeared to work fine. Did not see behavior like your gif.

Are you saying only your local version doesn't work? Are you using the latest version of TweenMax?

Link to comment
Share on other sites

It was weird Carl, I was seeing this on Windows 7 64-bit, latest Chrome but only after the first couple of refreshes. But it could just be buggy codepen page load shenanigans..

  • Like 1
Link to comment
Share on other sites

I moved over to Chrome 46 on Win 8 and still couldn't get it to bug out. Loaded it a dozen or so times. hmm.

Link to comment
Share on other sites

I tried:

Windows 7 64-bit, Chrome 46 

Windows 8 64-bit, Chrome 46

Windows 10 64-bit, Chrome 46

Windows 7 32-bit, Chrome 46

iPad Safari (only Safari I have)

 

approximately 10 refreshes on each and it played perfectly each time.

  • Like 1
Link to comment
Share on other sites

I think this is more of a Jekyll issue, and not GSAP! Since the codepen is working.. and Jekyll is not used in the codepen!

Link to comment
Share on other sites

Thanks for the quick response.  Here is the live site hosted on Github Pages (site not finished, but you can see the behavior of the arrow):
 
http://bg-scro.github.io/azimuth-blog/
 
To clarify some of the points asked/raised earlier:
* The codepen isn't the issue. The arrow works perfectly on the Codepen
* I'm loading the most recent version of GSAP with the script: 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

If you watch the behavior of the error "in the wild" it seems to start moving clockwise toward 220 degrees, sort of bounces back at ~20 degrees, then moves CCW to ~340 degrees before settling back at 0 degrees. When I experimented with setting just the first move `"+=220_ccw"` it did the same thing, except it kept moving counterclockwise after the first bounce (off the 20 degree stop), and settling at 220 degrees.
 
Ultimately I'm trying to animate the arrow so that it spins around a couple of times before settling at 0deg. But it's behaving unpredictably.

 

The code on the deployed site matches the expected code, with the change to relative suggested by Jonathan for the first move:

var needle = document.getElementById("hero-compass-needle");

var needleSpin = new TimelineMax({delay: 1, repeat: -1, repeatDelay: 4});

needleSpin.to(needle, 1, {rotation: "+=220_cw"})
.to(needle, 1, {rotation: "0_ccw"});

$(document).ready( function() {
  needleSpin.play();
});

Not clear how this might be a Jekyll issue? The javascript is loading correctly as far as I can tell, and should be executing in the browser, not on the server side..?

Link to comment
Share on other sites

I see the issue now on your live site in latest Chrome on Windows 7. Above i presumed you were seeing this on the codepen, since teh live site was not included.

 

Just to make it easy for us to see your JS code with all the code on the live site. What script file has your GSAP code so it makes it easier to find and see in context on your live site?

 

And what about using a fromTo() tween

 

See the Pen qOGovB by jonathan (@jonathan) on CodePen


 

needleSpin
.fromTo(needle, 1, {rotation: 0},{rotation: "220_cw"})
.fromTo(needle, 1, {immediateRender:false, rotation: 220},{rotation: "0_ccw"})

Thanks

  • Like 1
Link to comment
Share on other sites

Looks like the entire 'a' tag is rotating rather than the needle SVG path. I'm betting if you give an ID to that path and rotate that instead, your animation will work correctly. :)

  • Like 4
Link to comment
Share on other sites

Excellent detective work, PointC!

 

 

bg-scro,

 

In addition to the fact that you are animating the <a> tag, you also have css transitions on that tag which are causing the conflict.

To solve this just use the technique you used in the CodePen.

  • Like 2
Link to comment
Share on other sites

DOH! <face palm>

 

That fixed it. THANKS!

  • Like 1
Link to comment
Share on other sites

I knew this wasn't a GSAP issue .. Good catch PointC :)

  • Like 1
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.
×