gmullinix

In the attached pen, the moving elements do not stay centered on the blue line. The triangle and balloon don't stay attached at their center origins at the "top" half of the blue circular line. They do align as intended on the bottom part of the line. Removing the xPercent/yPercent via the TweenLite.set does make them stay positioned closer to the blue line, but we want them to be centered the whole way around. Or, if you change the xPercent/yPercent to positive 50 instead of negative, it reverses the problem: the shapes attach correctly on the top half of the line, but not the bottom half. Any idea what is happening?

Yes, works perfectly. Thank you! ?

Any update on this? (Apologies if you're still travelling and haven't been able to look into it yet.)

I have a timeline hooked up to a simple slider/carousel style div. Everything works fine when playing forward through the timeline. However, when I try to reverse the timeline, it gets stuck about halfway through and will not animate back to the start. This bug does not occur when using TweenMax-2.0.0. Please check out the Codepen and let me know if there is anything wrong in my code or if there's a different issue.

Hello, The latest beta of Draggable works fine without the "allowNativeTouchScrolling" setting, thanks! Any idea when this will be officially released? I'd prefer not to use the beta file in my project.

Encountered this issue today while working on a Draggable in Chrome on Windows 10. If I set the type to "x" or "left", my Draggable wouldn't move left and right when I clicked and dragged on it. This only happened in the latest version of Chrome. FF and Edge were fine. (Note that if I set the Draggable type to "x,y" but then used bounds to prevent the element from moving on the Y axis, the Draggable worked just fine.) I found this thread from 2 years ago: Draggable fails in Win 8 touch with type='x' and setting "allowNativeTouchScrolling" to false did fix the issue for me. However, I'm using a desktop, not a touchscreen, so I thought the solution was a bit odd. My question is if allowNativeTouchScrolling is the proper way to fix this issue now and in the future. Also, is it just me or has Chrome been turning into a crap browser lately? It started with their ridiculous decision regarding "will-change" and has gotten worse since then.

Apologies for not replying sooner, I was on Christmas break. Looks like the updated MorphSVG code is working perfectly in my Codepen now. Thank you so much for such a quick fix!

Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.

Brilliant, thank you so much! quick edit: You may want to consider updating this line of the documentation to specify that it is the indivdual tweenFromTo's that need to have the immediateRender set, instead of the timeline they're added to: Like all from-type methods in GSAP, immediateRender is true by default, meaning the timeline will immediately jump to the "from" time/label unless you setimmediateRender:false

Running into a weird issue when adding multiple tweenFromTo's to a timeline. What I expect to happen in the Codepen: When I first load it, the blocks should be resting against the black line and not be skewed. tl_master and tl_base should be paused at 0. What's actually happening: The blocks are not touching the black line and are skewed. tl_base is paused at 0.5 seconds instead of 0. It looks like tl_base is paused at the start of the final tweenFromTo added to tl_master (which is starting from 0.5 seconds). I don't understand why it's jumping there when I have both timelines paused and set to immediateRender: false. I also tried adding a position parameter to the tweenFromTo's (thinking they were all being added at the same time and overlapping or something) but that did not fix the issue. Please let me know if I can clarify anything.

@Jonathan Thank you for posting the overwrite info. I tried all of these, both in the master timeline and in a couple cases as standalone tweens. Only overwrite 'all' worked, but, as expected, this broke the course when I reset the section to play through it again (I described why this functionality is needed in my response to OSUblake's post). I think what I'm struggling with is that Draggable essentially has its own set of animations/tweens that occur when the user clicks the knob and moves it around. If there was some way of adding an overwrite to those 'invisible' tweens, perhaps that would solve the issue. What seems to happen is that as soon as the user answers question 2, the master timeline ignores where the user has just positioned the knob and resets it to the last place it 'should be', which is rotation 0 (as set on JS line 25 of the Codepen demo). I tried grabbing the final rotation of the knob after question 2 and immediately using a .set in the master timeline (and tested various overwrite settings) to override the rotation 0, but it still twitched and looked funny. Also tried a fromTo with similar code but that didn't work out either.

Thank you for the extremely detailed Codepen, I am definitely bookmarking that for later reference! I figured the easiest answer would be to move the rotation tweens out of the main/master timeline, and have the knob working perfectly now that I've done that. It would be nice to know more about how the timeline "records" values and possible ways to reset or override those values. Reason being, we allow users to jump backward and forward between different parts of the training, and therefore need to reset a bunch of things every time they jump, including anything we've manually tweened. In this particular case, resetting the knob to rotation: 0 is simple, but more complex interactive sections take a gob of extra tweens. Do you know of any write-ups that discuss how timelines record values in more detail? The Greensock documentation is excellent but I think I'm looking for information that's a bit more technical (and possibly going to be way over my head).

Greetings, I have a question related to Draggable and my main timeline. To put this in some context, I create e-learning courses where the user has to drag a knob to select their answer (cooler than radio buttons, right?). No matter what the user answers, my main timeline will advance and always point the knob to the correct answer. This works fine for question #1. After question #1, the main timeline will move the knob back to a rotation of 0, and show question #2. However, when the user answers question #2, the knob will first reset back to rotation 0 and then tween to the correct rotation. It makes the knob animation twitch and look bad. I instead want it to tween from the point where the user left the knob. Hopefully the Codepen makes this more clear. Check the JS box for a couple comments starting on line 30. I have tried a huge number of workarounds, including clearProps, overwrites of all kinds, Draggable update(), fromTo's, and combinations of all of the above. Nothing has been effective except "overwrite: all", but that causes its own share of problems. I feel like I'm on the right track but can't wrap my head around how to make the Draggable's tweens play nicely with my timeline. Thank you for reading and please let me know if I can provide any more info.

Greetings, I've encountered a strange issue where tweening a class name in a timeline causes issues when you reset that timeline via pause(0). The codepen has more info, please check it out: http://codepen.io/anon/pen/NGRgKB Please let me know if my syntax is incorrect, or perhaps if changing classes using both Greensock and jQuery might be causing the problem. Thank you! -Gwen