Jump to content

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

Afrowave last won the day on July 5 2015

Afrowave had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Afrowave last won the day on July 5 2015

Afrowave had the most liked content!

Community Reputation

8 Newbie

About Afrowave

  • Rank
    Advanced Member
  • Birthday August 5

Contact Methods

Profile Information

  • Gender
  • Location

Recent Profile Visitors

3,679 profile views
  1. I see. That means it should not be like how jQuery does it?
  2. 😃😂😂 Thanks Zack. Have an excellent day.
  3. 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.
  4. 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.
  5. 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" ?
  6. 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.
  7. 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?
  8. Wow! Thank you @ZachSaucier. Let me check it out. [Edit] I checked it out. Damn! You guys aren't playing. This is excellent.
  9. Sorry for not being clear. I would like to drag an arrow head from a base and the tail lengthen over time. Upon reaching the target, the arrowhead, onRelease, "sticks to the target and we are left with an stretched out arrow. I called real time because I would be drawing the arrow with a mouse or touch drag. I hope that makes sense.
  10. Very nice @mikel, very nice! I was wondering whether this can be done in real time and upon release the arrow remains drawn, like in an drawing program, or does this have to be done with a canvas tag and not an svg ?
  11. Thanks @OSUblake. Yes, I know and I have said so. The glitch is exactly what I want by the looks of it, not by how it works. The question is, why is the Tween involved in rendering of the SVG and yet there is no valid target?
  12. Thank you @ZachSaucier ! I never knew about XML namespaces. My SVG know how is moving along very well, thanks to you. I got Interesting glitch. I put in your code into mine and forgot to change the Tween target. What I have now is the linePath redrawing itself on every subsequent element click. When I comment out the Tween, it then behaves like your code but the SVG being rendered by the browser based on the path information. It looks very nice and looks exactly like what I want with the Tween and the wrong target. My problem is I can't understand how drawSVG is doing. https://codepen.io/Afrowave/pen/QWWLMvy
  13. Hey @ZachSaucier and @OSUblake, Thank you guys for being patient with this. I have got to the place where I am making multiple svg paths on the fly and I am able to set up the points that DrawSVG is meant to draw across. But there is a hitch. It looks like I need to implement an "async - await" on the Tween that is drawing out the path, but I am not sure. What do you guys think? https://codepen.io/Afrowave/pen/QWWLMvy?editors=0010
  14. Guys, guys ... 😃 I was in the middle of working out something like what @ZachSaucier has proposed ... let mapDot = { "Dot_1, Dot_2": "Trace-01", "Dot_2, Dot_3": "Trace-02" }; var max = 100; var duration = 1; TweenLite.set("path", { drawSVG: "0" }); var firstVal; var secondVal; var state = 0; document.body.addEventListener("click", e => { if (state === 0) { // The "start from" click TweenLite.set("circle", { fill: "#88ce02" }); TweenLite.set("path", { drawSVG: "0" }); // Update values state = 1; firstVal = e.target.id; TweenLite.set(e.target, { fill: "#f00" }); } else if (state === 1) { // The animating part state = 2; secondVal = e.target.id; TweenLite.set(e.target, { fill: "#00F" }); line2Trace = firstVal + ", " + secondVal; traceLine = "#" + mapDot[line2Trace]; myTween = TweenLite.to(traceLine, 1, { drawSVG: "100%", onComplete: function() { state = 0; } }); } }); I was looking at the generating the dot coordinates to allow a clockwise and counter-clockwise direction and adding a TimelineMax that I could ti.add() to it. Only for @OSUblake to blow everything out of the water. 🙌 He says ... Thank you Blake. You have made me realise that I am not using my math as much as I should and getting beyond basic shapes and lines in SVG. Let me get to work. I will definitely post my solution here. 😄