Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Afrowave

Control Scrolling of a div using an audio track

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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" ?

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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");

 

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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() ?

 

Link to comment
Share on other sites

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().

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
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.

×