Rotate vector arrow then follow path

After trying a number of previous suggestions and failing, I'm hoping someone can point out what I'm doing wrong here.

Objective: An arrow created via vector tool starts by pointing to circle. The arrow is enclosed in a group. The arrow rotates within the group to orient itself to the motion path, then the group follows the path to the second circle.

Within Hype, the animation looks perfect, however when played via Safari, strange things happen.

  • The arrow starts out not pointing to the first circle
  • The rotation goes too far, then jumps back to the correct orientation when the group follows the path,

Attached are:

  • A zipped Hype document (a simplified version out of my massive actual project
  • a video of the animation within Hype
  • a video of the animation in Safari

Thanks for any and all assistance.

Art.

rotate arrow then follow path.hype.zip (19.5 KB)


This looks like a bug, probably a difference in how Hype.app treats rotation prior to the first keyframe compared to the runtime. I've filed this, but will need to investigate it a bit further.

Since you already have rotation animations setup anyhow, I would recommend manually animating the arrow rotation and unchecking "Rotation follows motion path" to get it to look correct. Sorry for the hassle!

Thanks, Jonathan - sorry to give you more work. In the end I decided to punt the moving arrow feature and just placed duplicate arrows at the start and end location and used line draw to swap them.

Art.

1 Like

There's nothing to apologize for! I'm glad you posting about the problem - it probably has affects others and so the fix will be beneficial :slight_smile:.

This is not only a Safari issue, same behaviour in Chrome. You can solve the problem by setting an instant keyframe at the first frame for the motion path.

rotate arrow then follow path_1.hype.zip (18.3 KB)

4 Likes