Control Scrolling of a div using an audio track

[Afrowave]

Hi GSAPers,

 

I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head.

 

I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively? 

See the Pen zYYJrjY by Afrowave (@Afrowave) on CodePen.

[ZachSaucier]

Hey Afrowave.

 

You can use a variable or function in a scrollTo object. 

 

But you've got a few things going on here. What's your end goal? Do you want it to be a set animation from the start? A button to start a set animation? The user's scroll position controls the animation entirely? I think it'd really help to clarify you intentions.

[Afrowave]

Hey Zach,

 

I am sorry, I was experimenting, trying to see how everything else works. Let me clean it up and work with the scrollto object. 

[Afrowave]

Hey @ZachSaucier

 

Thanks for the tip. I got some sleep and voila! What was getting me stumped is how the time variable was going to work. Clearly once you are using the plugin object, the time variable is suspended. I can't, for the life of me, remember why I had not noticed that.

 

I must say, GSAP is that hammer that makes everything  I see a nail! ?

I got what I wanted. One thing left. Is there a way to get the y:"max" as a value into say, scrollDiv.progress() * "max" ?

[ZachSaucier]

I'm glad you got things working!

 

5 hours ago, Afrowave said:

One thing left. Is there a way to get the y:"max" as a value into say, scrollDiv.progress() * "max" ?

I'm not sure I follow. Could you post a minimal demo of what you're talking about?

 

[Afrowave]

If you go to the pen, it would fit into something like this:

 

function Update(){
  scrollDiv.progress( aud.currentTime/aud.duration );
  scrollDiv.to("#Scroll_Text", 10, {scrollTo:{y: scrollDiv.progress() * "max"}});
};

That way, I don't have to keep guessing how long the inner content is so that the scrolling action fits perfectly all the time.

[ZachSaucier]

Ah, sorry for being obtuse. I understand now.

 

There's no built in way, but you can easily do this calculation using two built in measurements:

 

let maxScrollHeight = scrollContainer.scrollHeight - scrollContainer.offsetHeight;

See the Pen OJJoYwd?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Afrowave]

Nice, very nice. You guys have made GSAP so easy. 

 

Is scrollContainer part of scrollTo  variables? Is this documented somewhere that I can't seem to find? I am beginning to feel not too clever. 

[ZachSaucier]

10 minutes ago, Afrowave said:

Is scrollContainer part of scrollTo  variables? Is this documented somewhere that I can't seem to find? I am beginning to feel not too clever.

No, you can see my declaration at the top of the JS in the pen  

 

const scrollContainer = document.querySelector("#Scroll_Text");

 

[Afrowave]

???

 

Thanks Zack. Have an excellent day.

[GreenSock]

For the record, there technically is a ScrollToPlugin.max() method that you can feed an element to (and an axis, like "x" or "y") and it'll give you the maximum scroll position. 

var max = ScrollToPlugin.max(myElement, "y"); //note that the target must be a DOM element, not selector text.

 

[Afrowave]

21 minutes ago, GreenSock said:

Hey Jack,

Thanks for the tip. I suspected there should be something like that, because you guys think of things like that. ?

 

 //note that the target must be a DOM element, not selector text.

Do you mean that the target should be referenced by a getElementById() and not a querySelector() ?

 

[ZachSaucier]

7 minutes ago, Afrowave said:

Do you mean that the target should be referenced by a getElementById() and not a querySelector() ?

No, he meant it has to be either one of those and not something like ".myTarget" which is called selector text (or a query string). Selector texts are the things that are passed into getElementById() and querySelector().

[Afrowave]

I see. That means it should not be like how jQuery does it?

[ZachSaucier]

13 minutes ago, Afrowave said:

That means it should not be like how jQuery does it?

I'm not sure that I follow you. Try it out and see for yourself