Continuously Tween += on Click- / Taphold

[kreativzirkel 43 Likes (Newbie)]

How would you approach a continuous "+=" Tween to scroll the container?

(The scrolling mechanism isn't at issue here. It is a simple overflow: scroll box, which scrolls perfectly on both mouse and touch devices)

 

All I need is a starting point on how to tween something without an actual duration; 

 

 

Thanks!

[Shaun Gorneau 1,503 Likes (Superhero)]

While I can't spend the time to optimize right now ... this might point you in the right direction.

 

See the Pen XRBgpV?editors=0111 by sgorneau (@sgorneau) on CodePen

 

[kreativzirkel 43 Likes (Newbie)]

EDIT: W00t?

On clickhold longer than 1s both pens lag as hell and end in a freeze? 

Am I the only one?

 

Is there a particular reason why you chose to use x on the .scroll-content? 

My guts say "go for scrollLeft on the .scroll-container"

 

I desire 2 specific details:

1) If only clicked instead of click-hold the scroll should go tween exactly one card (faster then on click-hold)

2) When click-hold-scrolling, I want the scroll to stop immediately on mouseUp.

 

I forked your codepen and changed the following:

– tween scrollLeft on the .scroll-container

– to tackle 2) kill the last started tween on mouseUp, which.. I honestly cannot tell if it worked

 

See the Pen XRBeRK by katerlouis (@katerlouis) on CodePen

 

[Shaun Gorneau 1,503 Likes (Superhero)]

41 minutes ago, kreativzirkel said:

Is there a particular reason why you chose to use x on the .scroll-content? 

My guts say "go for scrollLeft on the .scroll-container"

 

I choose to animate a div within a masking container because it allows for the use of hardware accelerated attributes; in this case, 'x'. I helped another forum member out in a similar way to to tie a slider to the "scroll" (actually x) position of a group of tiles.

 

See the Pen mWRZob by sgorneau (@sgorneau) on CodePen

It may contain some useful elements for you.

 

[OSUblake 9,990 Likes (Superhero)]

Lerp it! This is what drives most animations and graphics, linear interpolation.

 

function lerp(start, end, progress) {
  return start + (end - start) * progress;
}

 

All it does is find a value in a range based on a percent. If you're moving from 0 to 300 and you're 50% the way through, how far along are you?

 

var x = 300 * 0.5; // 150

 

What if you started at 50 instead of 0?

var x = 50 + (300 - 50) * 0.5; // 175

 

You've probably written a lerp function without even knowing it. Random returns a value between 0-1, so it's just like a percent.

function random(min, max) {
  return min + (max - min) * Math.random();
}

 

However, lerp isn't too exciting on it's own. After all, it's the same thing as a linear ease.

 

But we can make it exciting. Lerp a target value with the same progress to create a natural looking ease out animation.

 

See the Pen 578e170d729eaa97fc54b89c57ee380f?editors=0010 by osublake (@osublake) on CodePen

 

You can do the same thing for your scrolling animation. You just need some value to chase after. Really simple example using the modifiers plugin. Watch as the pink circle chases after the blue circle.

 

See the Pen d5c7673f580dc760fc4a38f8367c3c8e?editors=0010 by osublake (@osublake) on CodePen

 

 

And for more ideas on how you can use lerp, check out my ModfiersPlugin collection. Almost every demo uses it in one way or another.

http://codepen.io/collection/AWxOyk/

 

 

 

 

 

[kreativzirkel 43 Likes (Newbie)]

Forum Bug? Sometimes the codepens appear to me, sometimes not. Never saw both at the same time in blakes topic (Safari 9.1.3 on Mac OS X El Capitan 10.11.6)

 

Wow. Heavy answer; so much genius in so little code.

My brain still can't connect this one dot that then spreads out to all the dots. 

 

I have to chew on this a little while longer in hope to see Matrix.

 

(I guess?) I understand your basic lerp example, although I still wonder how you would make boundaries/caps. Lets say I want to change the progress of a timeline / tween regarding on the scroll position. "From 50 to 400px scrollTop go from progress 0 to 1"

 

var toTween = TweenMax.to("...", 9203, { ... }).pause(); // duration is irrelevant in my case (as I understand it), since I want to change progress on scroll delta (delta right choice of word in this context? :D)
                                        
requestAnimationFrame( scrolling );
function scrolling() {
	var st = $(window).scrollTop();

	var scrollFrom = 50;
	var scrollTo = 400;
	var delta = (st - scrollFrom) / (scrollTo - scrollFrom);
                                        
	toTween.progress( delta );
                                        
	// recursion
	requestAnimationFrame( scrolling );
}

 

But scrollTop below 50 delta results in something like -0.14 etc. 

.progress(-0.14) is almost as 

 

 

Question #1:

How would you cap delta (most conveniently)?

 

Question #2:

Is there a quicker way to control a tweens / timelines .progress() over a scroll-period? I love the effects you can create with skrollr (http://prinzhorn.github.io/skrollr/) but don't like to hardcode my animations inside the HTML. Plus: there is so much crazy possibilites with Timelines.

 

 

Here is the scroll-demo

(I will tween opacity aswell, but for the sake of seeing the problem right away I didn't include it in here)

 

See the Pen wdYYop by katerlouis (@katerlouis) on CodePen

 

[kreativzirkel 43 Likes (Newbie)]

*gentle push* – Don't know if the questions require a new thread.

[Carl 9,066 Likes (Superhero)]

How to create a scroll driven animation seems like a much different question than what you were originally asking. 

The easiest way to go about this is to learn ScrollMagic which is a very robust api for controlling GSAP animations via scroll.

 

http://scrollmagic.io/examples/

 

Check out Petr Tichy's ScrollMagic resources: https://ihatetomatoes.net/?s=scrollmagic&post_type=post&ref=5

 

Blake has posted often about controlling animations via scroll without ScrollMagic so you could try to re-engineer some of these to suit your needs:

 

See the Pen c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 by osublake (@osublake) on CodePen

See the Pen 0d4742d2200d028ed42297cb874af2b5?editors=0010 by osublake (@osublake) on CodePen

 

See the Pen 46295694a457cc0c61f32a8153e26639?editors=0010 by osublake (@osublake) on CodePen

 and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.

 

 

 

 

[kreativzirkel 43 Likes (Newbie)]

7 hours ago, Carl said:

 and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.

 

I guess you don't mean the post in the current thread. But I can't find a link.

I would love to read Blakes post about normalize, lerp and clamp

[mikel 1,823 Likes (Superhero)]

Hi kreativzirkel,

 

Looking for lerp links isn't that complicated: just use the search function.

 

As a start take a look to https://greensock.com/forums/topic/14912-parallax-scrolling-sections/#comment-64130

 

Best regards

Manfred

[kreativzirkel 43 Likes (Newbie)]

20 minutes ago, mikel said:

Looking for lerp links isn't that complicated: just use the search function.

 

I figured Carl refers to a specific post by Blake and figured he just missed to include the link. Search won't tell me which one of Blakes 2,294 posts he meant  – If I misunderstood Carls message, sorry for the bother.

[mikel 1,823 Likes (Superhero)]

Hi Kreativzirkel,

 

 "normalize OR lerp OR clamp" copy and paste in the Forums Search (see above) will present all posts and comments by BLAKE regarding this topics.

 

Best regards

Manfred

[Carl 9,066 Likes (Superhero)]

Sorry for the confusion guys. Must have had a paste fail last night. 

 

The he first post Mikel had suggested was the one I meant to share

 

 

 

[OSUblake 9,990 Likes (Superhero)]

You still working on this?

[kreativzirkel 43 Likes (Newbie)]

The pixel-project I'm annoying you guys with interfered with this one. But I will work on this next week again ; probably writing here again