Jump to content
Search Community

Continuously Tween += on Click- / Taphold

katerlouis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

FF45EFFA-42FD-435D-8078-C63B3D19DA37.jpg

Link to comment
Share on other sites

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 :o

 

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

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

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.

 

 

 

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/

 

 

 

 

 

  • Like 7
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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:

 

 

 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.

 

 

 

 

  • Like 5
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...