Hi @RichardC
Is it just the ease for stopping the sub you're after?
// this ease just creates a forward<->back-motion
var stopEase = 'M0,0 C0.124,0 0.394,0.151 0.484,0.162 0.656,0.182 0.838,0 1,0';
function _Stop(speed) {
TweenLite.to(div, 0.2, {
ease: CustomEase.create("custom", stopEase),
x: '-=' + 300*speed
});
}
_Stop(0.5);
Hi @Johny13
Are you sure the element you're targeting is actually scrollable? You can get the current scroll position of an element like this:
var body = document.querySelector('body');
console.log(body.scrollTop);
I tried adding a div parent with 'overflow:scroll' and set it as the scroll container in the tween, and it worked just fine as far as I could tell.
Edit: In Codepen it's the parent element of the body that gets the scrollbars.
I'm sure it can be done alot better, but just added a function for clicking the circle to make it jump back to its original position. Click it again to animate it.
Hi chapolote
Adding to Sahil's answer... You can use the onComplete event to trigger a new timeline and use that as a "repeat" where you initialize it with new values.
Hi Guido
After some initial testing I can conclude that there's a problem with the bounds.
When it jumps, it does so to either 360 or 0. If you keep holding the mouse button down, and drag the mouse pointer once cw or ccw arround the center, it starts moving again. The behaviour is the same as if you keep pulling the mouse arround the center (and then back again) after the knob has hit max- or min bounds.
Edit:
Scratch that. The rotation value is increased or decreased by 360 if using bounds or not. It was just a symptom.
I have no idea what's going on, but maybe someone will find the observation useful
Diaco beat me to it
Anyways, here's what I came up with:
Edit: movement triggers when hovering.
Edit2: Made the flow feel more natural.
Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.
Hi Jonathan,
I only tried clicking the button like a normal person, so maybe that's why you can't replicate the problem?
In either case, your solution works very well. Best of all: it doesn't require a "hack". So I think that's the one I'll go with.
Where did you find the information on GSAP setting the display property at the end of the animation when using autoAlpha? The documentation only mention that it sets the visibility property. The few times I've tried using the display property in timed tweens, I never ended up with the desired result...