Leaderboard

Look at the page @Sahil linked to. You need to find the closest point on the path. NONE of the pens you have made do that. They all do linear progression.

If you look at those boxes, they go in order, and adjacent boxes will not overlap. So you can use that prevent unwanted movement. For example, if the user starts out dragging in the first box, we'll call that box #0, then you can limit dragging to that box and box #1 i.e. the next box on the curve. Once the user has dragged into box #1, then you would limit movement to box #0, #1, and #2. Once the user has dragged into box #2, then you would limit movement to box #1, #2, and #3. You would just continue that pattern until the end. Normally I would make a demo, but I don't have a lot of time right now. If @Dipscom or @Sahil wants a challenge, feel free to help out.

Yeah, that's one problem with finding the closest point on a path. Think about a circle. There would be an infinite number of closest points if your mouse was in the center. I commented out the distance property in the object returned by that function because I wasn't using it, but you could use that to run some logic to make sure it doesn't jump around. Breaking your curve down into smaller chunks might make that easier. Somewhat related demo where I create bounding boxes around smaller parts of a curve. You can see that progression could follow the order of the boxes.

My demo is kind of crude, and I didn't spend a lot of time polishing it. Try returning the "bestLength" in the object that is returned by the closestPoint function. I think that value should give you what you want for the stroke.

Let it never be said GSAP fourms isn't value for money. Wait for Black Friday, we'll be doing some crazy deals: Ask one question, get three answers, five jokes and a CorePen example snippet.

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false.

I am interested to give it a try, I might be able to do it tomorrow evening but don't consider it a promise.

If you want a cursor to go over "empty" spaces and honour them as character positions then you could probably use the solution I suggested inserting text for the empty space but making it invisible.

That site uses GSAP (for animation) and Three.js for 3D WebGL rendering. https://threejs.org/ Other than that I really wouldn't even know where to start with that effect. I'd say though that pulling off that effect would require a substantial working knowledge of Three.js. Probably very little GSAP code for doing the actual animation.

Wow, Blake. That's a crazy demo. Very cool.

Fixed.. Timeline was in paused mode

....and it's launched Enjoy!

We just released 1.20.5, so please try updating to that and let us know if that resolves things. If you get it via NPM, it's ES modules by default.

Regarding #2, yeah, sorry, that's not something we offer but I'm sure you could rig something up like that yourself. Regarding #1, it is NOT working the way you assumed; it's scrolling the container. It's not moving the box back into view. In other words, to center it I'm animating the scrollTop/scrollLeft of the container rather than the x/y of the box. That's what you wanted, right?

Cloned your repo, installed and already ran into problems. There's a couple of props you marked as required but you are not passing them into the component. There's something triggering the debugger in chrome, so it freezes the running of JavaScript. It's on line 132 of 'abstract-xhr.js' - No idea what's that or what is meant to do. Finally, I forgot to charge the laptop during the day. Only have 11% of the battery left, I doubt I'll be able to look any further into this tonight. By the time I get home, there will be time only to have dinner and a wash before bed.

SVG filters can be very processor intensive which can yield sub-optimal animation results. If your logos are all the same size (or aspect ratio), you might do better with a bitmap (png) shadow and place it underneath each logo. I'm not exactly sure what the best performing alternative would be here.

I'd say the answer to this question is in your other thread. Go check it out, you'll have a two-for-one deal there.

Please do not tag users 1 hour after posting to bring extra attention to your issue. Your original post was at 6:30am local time. Everyone here does their best to address the issues as quickly as possible to the best of their ability as evidenced in your other, very similar thread here: Please provide an image or detailed description that clarifies what the difference is between a "curve" and "smooth curve". I don't understand what you are trying to do. Thanks.

Hello! I have managed to spend a bit of time on this. Diaco's original pen is quite useful and a rather neat trick he's got there. The catch is making sure you are using the same type of curve for the Bezier and the SVG you are drawing. In this case, it's "Cubic". It will be wise to read the following pages to get yourself familiar with the Path attribute in SVG and GSAP's BezierPlugin: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths https://greensock.com/docs/Plugins/BezierPlugin Now you can just drag the knob sideways to get it to slide along the path nicely. I also feel this fixes your continuity issue, where you were saying the knob wasn't sitting exactly where you expected it to be. Here's my fork of Diaco's pen: Now if you want the dragging not to be just a straight line, you know it will be a rather complex set of logic for you to achieve that. And I don't think I'll have enough spare time to write the logic for you.

I've dabbed with React in the past and have had a play with create-react-app as well. It is possible to get it working. I don't remember from the top of my head (it's been over a year) but, half the headaches I had was to do with the linting of the code, not GSAP or React. It wouldn't build because of the linter. There are several threads discussing React and GSAP here, I'm sure enough of them will be with create-react-app, maybe you can dig something out from there. As for using drawSVG, if no one else throws an example you can follow here, I'll try and put something together for you once I have a moment.

The transformOrigin only applies to transforms like scale, skew etc. not when you animate height/width. You will instead have to shrink your column1, column2 to achieve that effect.

@tekkon Hi, anivendo is still under development, currently in alpha Version. There will be a Mac Version. Unfortunately, I am very busy with other Projects right now, so I am not able to leave a roll-out date. But I will definitely roll-out a Mac Version this Year. I develop anivendo mainly for producing HTML5 animated banner ads and put the focus on easy handling and a fast workflow. anivendo exports banner ads whose code is very easy to edit and understand. This is a big difference to Animate CC. anivendo can not really be compared to the functionality of Animate CC yet. For everybody who's interested: There will be an update by the end of June, in which anivendo contains an ease customizer.

yoyo works in conjunction with the "repeat" property and simply defines HOW the repeats occur. So you'd need to do something like this: TweenMax.to(targ, 0.5, {alpha:0.3, repeat:2, yoyo:true,ease:Linear.easeNone}); Make repeat -1 to cause it to repeat infinitely.