Helper tool

[auginator]

Here is a first crack at a helper tool based on the pen I showed you and the grid you already have in the demo.

Features

• Provides jquery-focuspoint data attributes & CSS background-position in inputs for easy copy/paste.
• Input for pasting in your own image path to use in the demo - will update aforementioned fields accordingly.
• Added GreenSock GSAP for animation
• * Animated transition when you click on a new focuspoint
• * Animated Target Reticle
• Added new Image from unsplash.com (just so we have on in there without a reticle already on it).

Issues

• GSAP tweens get a little clunky - I think it probably has to do with calling .adjustFocus() so many times consecutively. Perhaps we should make a special method in focuspoint optimized for animation?

Let me know what you think!

[jonom]

This is awesome man!! Thanks so much.

I am finding the animation very slow and jittery (as you pointed out) so I might just play with that a bit before I merge in in to master. It's also only animating some of the time and other times jumping straight to the new focus.

It would be great to get the animation working well for this demo tool as it's nice to have a smooth transition when you're changing the focus point. I haven't tried yet but if left/top css properties can be animated with CSS transitions that would probably be easier than using GSAP?

Just thinking out loud about animation for a second. In 'normal' use I don't think animation/tweening will be very helpful as you'll only be wanting to adjust focus after an image container changes shape or size - and when that happens you'll want the focus to update instantly, otherwise the container may not be completely filled with image while the animation is taking place - it will take a while for the image to catch up with the container.

However if we can get animation to work well without adding a lot of weight to the plugin I think it would be a great addition and could lead to FocusPoint being used in ways I hadn't anticipated.

Thanks again, this new helper tool will be a great addition to the plugin.

[auginator]

My pleasure!

I figured out why the GSAP animations were messed up - but after reading your comment I realized that for the purposes of this, it is really way overkill to use anyways. I removed the GSAP dependency, and added CSS transitions instead. GSAP is definitely worth exploring for more complicated transitions (sequencing, controlling playback, reverse).

One way of adding animation that occurs to me is the old Ken Burns effect - basically we would just have to calculate a second focus point and tween between the two.

I send a pull request with the CSS only version!

One more thing: I noticed that you referred to the data attributes in the plugin like this:

$(this).data('focus-x')

I have always used the camel case version, as I am fairly sure this is the convention. Obviously jquery is converting the hyphen separated version to the camel case behind the scenes - notice how in the helper I use:

$(this).data('focusX')

…when setting data attributes.

Just a thought!

Cheers!

[jonom]

This is a brilliant update, thanks!

Ken burns type effects - great point - I can see how that could be really neat in combination with this plugin.

Thanks for the tip on camel case data attributes too.