pr1ntr

If course! thanks.

I have a timeline kinda with a scrollTrigger attached. I am doing something like mainTimeline.current = gsap.timeline({ scrollTrigger: { trigger: containerRef.current, start: 'top top', end: 'bottom bottom', onSnapComplete, snap: { snapTo: 'labelsDirectional', duration: { min: 0.5, max: 3 }, }, scrub: true, onUpdate, }, }) and then at some predetermined point I want to do this mainTimeline.current.tweenTo(pathLabel, { duration: 1 }) However, while this does initiate the scroll animations, it does not actually scroll the page. Am I missing something?

Hey, I spent hours if not days trying to figure out this exact functionality. "labelDirectional" is not documented in the scrollTrigger docs. Is this a brand new thing?

I think this has to do with the fact that webpack has a define method as well module

Nevermind, I am dumb. turns i had 2 elements with same ID! I need to not ID my svgs.

I am having this same issue now. However the SVG is inlined to the DOM and is not under any circumstance display:none in any of its parents. Its really pissing me off. The weird thing is in this codepen it works fine: http://codepen.io/pr1nt_r/pen/MarYZr?editors=101 But on my site it NS_ERROR_FAILURE. I can't for the life of me figure out what is going on. Is there anything you guys can think of at all that could cause this if not the display:none issue? btw its pretty much impossible to debug GSAP midtween I had to go turning every tween off/on to figure out which one it was to even isolate the code that was producing it. Maybe adding some error handling that identified the element selector being tweened?

Found it: http://pastie.org/private/utwsu3j86f0erjj8onqesq is the answer. make a proxy object with a property value 0-1.

Hi, I am trying to custom transform an svg polygon by feeding it the points arrays and have it add the difference on every frame between from to: http://pastie.org/private/owhlbo2kxu1rdiy48gjcaa So I want to be able to use the easing if one is provided (ie., in the call Cubic.easeOut) What is the best way to transform the values based on the ease?

I totally understand the reasoning behind not "assuming" things. I have to stop myself from that all the time. But just for fun, here is my use case. So I have an animation in which is comprised of 4-5 distinct timelines that control what happens in some sequence. The sequence of these timelines varies upon the "in" or "out" of the total animation. so if the animation is going out I have to rearrange these timelines. What I tried to do initially is create all timelines in a paused state and assign them to vars of some object that is in charge of managing them. Then every time I want to animate in, I create a new timeline and add those tweens to it in a particular order. When I want them to animate out I add them to another tween in reverse an then reverse that timeline. What I had expected is as soon as I added them to another tween they would inherit that tweens paused state. Since the parent tween is ultimately in charge of playback of its children it seemed rational that it would override whatever paused state they had. What I had resolved to do was just remake each timeline every time I wanted to animate in an an out. I guess I don't feel terribly comfortable with constantly instantiating tweens, but I have gotten over it for the most part as I am assured that the tweens GC very well. The profiler also confirms this. I figured it may be easier to manage the same instance of the tweens. Thanks for your input guys.

I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.

turns out i needed a different overwrite

I have a draggable instance that is responsive for page scrolling on tablet devices. When the onDrag events fire it runs a function that updates stuff on the page with its current position (0-1) and scrollTop/y to a method that delegates this information to tell stuff to parallax or trigger if it has gotten far enough down the page. A problem is starting to present that when onDrag fires this update method everything parallaxes fine however when onThrowUpdate runs it stops this particular parallax animation. I think it may have something to do with how the animations is run. Here is the code tweenParallax = (pos,tween,min,max,dur) -> amount = ((pos / max) * 1) * dur if pos <= max and pos >= min tween.tweenTo amount , overwrite:'all' ease:Quad.easeOut module.exports.clouds = (setId, min, max, dur) -> minPos = min maxPos = max duration = dur $el = $(".clouds#{setId}") clouds = $el.find(".cloud") tween = new TimelineMax tween.add TweenMax.to clouds , duration , y:"+=400" tween.paused(true) return (pos) -> tweenParallax pos , tween , minPos, maxPos, duration pardon my coffee. Let mek now if you need a codepen, it may take some time to set one up.

Is there a way to set a callback after instantiation of a TimelineMax object?