GreenSock has a pretty awesome SlowMo effect that decelerates initially, then moves linearly and then accelerates again at the end. https://greensock.com/docs/v2/Easing/SlowMo Can we have something like this added to Hype?
Easing is pretty good in Hype you can achieve something similar, one thing if hype had an import and export.
In Hype Pro you can create and edit custome easing so just build your curve. Description of the curve is in the docs you linked.
a slow-motion effect that decelerates initially, then moves linearly for a certain portion of the ease (which you can choose) and then accelerates again at the end;
I know what you guys mean. That’s what I’ve done, it just takes a lot of trial and error to get it feeling right.
What would be fantastic for Hype’s easing window is:
- prevent it from disappearing when you go to another app, then back to Hype
- remember what size you left it at when you reopen it
- ability to enter cubic-bezier numbers
- ability to export/import custom curves easily between Hype documents
But that trial an error will lead you to be more creative with easing. Something I overlooked when I was playing around were the tabs up on the top.
That said, I frequently use Easy In Out in with Quint which fires it slightly slower and then gradually accelerates and slows down/tapers off. It became ones of my favorite presets in the line of work I do, which tends to be exaggerated or over-exaggerated?
Thanks, these are all great recommendations. Please note you can use regular math within the easing window:
Line 59 has the formula for ‘Slowmo’ here: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/EasePack.js
Anyone want to try to replicate with
I appreciate the how-to link, Daniel!
Thank you Daniel, an example would be extremely helpful in this scenario since the read me does little or no justice for someone like myself. Jonathan touched on the idea of using the mathematical input just briefly in the video. If you can kindly create a test/hype file with a example I’m sure people of the forum would appreciate it and maybe can apply and share their own examples? I know I would.
My bezier drawing skills are way better than my sin/cos/tan math understanding, so I would just build easing transitions visually. I’m not the person to reverse engineer the function in EasePack, but I wanted to point out that is in there.
https://codepen.io/GreenSock/pen/sxdfe Shows how this slowmo function looks.
Hmm ok, let me try to maybe do this from scratch with the UI bezier now. I’ve got to figure out the overall time and it looks like it may just have to be with two time slots (in and out) within the timeline.
Heres my timeline interpretation of the above codepen example.
SlowMoH4.hype.zip (14.8 KB)
@Jonathan, Is there a slight chance you can save this preset as official preset for hype or maybe mimic what greensock uses via math? I must admit its an amazing easing transition.
Also, Instead of labeling it “custom” shouldn’t it be labeled to what the name of the preset is? What if I have two in the timeline and they are different custom ones? How do I tell them apart? I know I can open the easing tooltip to see which one is which.
This is more or less what it looks like
Awesome thanks for getting this started!
When I opened up your document, I’m seeing that custom (un-named easing transitions) are correctly labelled as ‘custom’. But when you have a transition labelled as Slow Mo selected, then it correctly identifies it as ‘Slow Mo’. So a custom, unnammed easing transition will always appear as ‘Custom’ in the timeline area.
heres the official SlowMo Easing from GreenSock
Thanks, Pete! I went to GreenSock’s visualizer originally, but I have the old visualizer for GSAP 2 bookmarked and I didn’t see it in there. This is great.
Great, so something like this:
slowmo2 2.zip (12.1 KB)
yep it is what Im doing now trying to get it just right very close will share my interpretation.
GS-Slowmo-PB.hype.zip (18.5 KB)
See all starting Keyframes with and without the slowmo.
Ok @CheeseDeluxe in order to achieve exactly the effect seen in the example.
We’re happy to add more, these seem like great presets to add.
The end of this (and another in the document) looks very flat. It seems like if it is entirely flat at the end then the timing function should just be scaled horizontally to not include that part, as the animation itself can be timed more accurately, right?
Note that if you make modifications to a saved timing function, it will then appear as “Custom” since it has diverged, but it keeps track of where it came from and you can click “Update [name]” to save it back:
Very cool. Thanks, man
I should be thanking you for a feature request.
@CheeseDeluxe Lol keynote has the preset too they just call it: ‘Drift and Scale’
DriftandScaleKeynote.zip (218.7 KB)
SlowMoEffectWGSEase.zip (149.1 KB)
Great demo for the timing functions :-D. Love it!