Afrowave Posted November 12, 2019 Share Posted November 12, 2019 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 More sharing options...
ZachSaucier Posted November 12, 2019 Share Posted November 12, 2019 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. 1 Link to comment Share on other sites More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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 More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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 1 Link to comment Share on other sites More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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"); 1 1 Link to comment Share on other sites More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 ??? Thanks Zack. Have an excellent day. Link to comment Share on other sites More sharing options...
GreenSock Posted November 13, 2019 Share Posted November 13, 2019 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. 1 Link to comment Share on other sites More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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(). 1 Link to comment Share on other sites More sharing options...
Afrowave Posted November 13, 2019 Author Share Posted November 13, 2019 I see. That means it should not be like how jQuery does it? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now