aroy002
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by aroy002
-
-
Hello,
I'm using the DrawSVGPlugin.GetPosition with good success to check if an SVG has drawn itself to a certain point before triggering a separate animation, like so -
if (DrawSVGPlugin.getPosition(".svg-line #filled")[1] > 60) {
do animation
}
else {
reverse animation
}
This works great when using the touchpad on my macbook. However, I just noticed on mouse scrollwheels, that it doesn't seem to catch the IF statement condition if I scroll past it in 1 long flick. If I scroll even a small amount afterwards, this triggers the animation. Is there an update function or way to fix this issue?
Thanks!
-
Awesomeeee, thank you!
-
I've gotten DrawSVG to work with scrollmagic just fine, but as I'm working on a responsive project that changes many offsets with browser resize, making consistent timing pretty tricky. The path being drawn itself changes width and height, so tying fixed scroll events don't play well.
I was hoping I could run a tweenMax based off the current stroke-dash-array or position of the path I'm animating already with scrollmagic/gsap.
if I could target where the filled in path is, I can write conditions around that number or position. Is this a feature that already exists?
DrawSVG update position
in GSAP
Posted
I'm not using scrollmagic for this particular animation. I'm using the getPosition value of the DrawSVG plugin to determine a tweenmax animation (fade in). There is no scrollmagic scene code involved. And like I said, it works perfectly on touch pads, because the scrolling is smooth scrolling. With choppy scrolling on a mousewheel, I can "jump over" the position conditional. It recognizes that it went over the value as soon as I start scrolling the second time (either with the mouse or touchpad).