Leaderboard

That's just because you've got an error in your JS code that's referencing a non-existent object (progress): progress.html(tl.progress().toFixed(2)); If you look at the console, you'll see a bunch of errors getting spit out. Once you remove that line, it looks like it all works perfectly Let us know if you've got any other questions.

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.

Thanks for the demo. SplitText isn't removing any spaces. This is just normal browser behavior. Only 1 space in your code will be honored. If you remove all the JavaScript you will see that there is only 1 space that gets recognized I don't think there is a SplitText solution for this. Someone else may have some suggestions. You may need to inject your own divs or spans with single spaces.

Hey GSAP, Sorry for the late response. I tried hard to reproduce the problem in codepen but it wasn't possible. Anyway, I found what was the problem. The SVG renders in heavy dom documents looks to be blocked... (probably for the sake of performance) although there is no documentation anywhere regarding this! As proof of this assumption is the solution that I found... that is not really a hack. The solution is... LAYERS! Forcing the browser to create an internal layer for the animation container, improves the performance (but note that this is not cheap and should be used sparingly). A nice description for this can be found here: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

First of all, welcome to the forums, @closerlook. Thanks for being a Club member. Short answer: Set the autoKillThreshold to a lower value (default is 7): ScrollToPlugin.autoKillThreshold = 3; And make sure you're using the latest version - the codepen you posted is using a very outdated one. I know, it's counter-intuitive because it's pointing to the "/latest/" directory on the CDN, but unfortunately CDNJS stopped supporting that years ago and they refuse to update files there. We begged...they denied. So just point to /1.20.4/ instead, and you'll be golden. Explanation: autoKill is enabled by default which means that ScrollToPlugin will automatically check to see if the value that it set on the scroll value last has been changed. If so, that means something else (typically user interaction) made it change, thus the tween should be killed (well, that part of the tween at least). The problem is that some browsers (like iOS safari) are pretty sloppy with those values, so even if (for example) ScrollToPlugin sets it to 112, Safari might alter that slightly (without any user interaction), so we had to build in a tolerance. That's where the autoKillThreshold comes in. Does that solve things for you?

Or just a simple <span> with a margin, like: <div id="blueBox">hi<span style="margin-left:5em"></span>greensock</div>

It appears you are using a jQueryUI slider. The benefit of using such a tool is that you don't really have to do much programming to get it to work. The downside is that if you want to customize it beyond what it was designed to do... it can get really messy. To configure your slider to have a red bar grow as it moves to the right you would have to use javascript to inject a red div into the slider and then tween it's width (or scaleX). Unfortunately, jQueryUI customizations are a bit beyond what we can support here in the forums. Someone around here might have a simpler slider that can be customized and configured to be be Draggable and control an animation. Unfortunately, I can't build out a component like that for your from scratch at the moment. We offer GSDevTools for controlling animations: https://greensock.com/gsdevtools

Hi and welcome to the GreenSock forums. I removed the fill and filter from each logo. See if this runs any better. What type of iPhone / iPad are you using (version, iOS)

Yes, I wrote that reply without looking at the code. Your answer to number one is spot on. Maybe I can set up a button with a click event to scroll to the location of the shape. I will come back with a reply to this with my final result just for completeness. It may be a few days. Thanks for the help.

Cool, it's never occurred to me to give an empty span size.

I must be too sleep-deprived because I read the question about 5 times and looked at the codepen and I still don't understand what's being asked. You seem to be using a set() call but expecting an eased animation. Why? And why did you add CSS transitions to something that's being controlled with JS? I'd strongly recommend avoiding that. Wouldn't it be as simple as changing your set() to a to() call and adding a duration? Again, I'm sure I'm missing something obvious. Are you saying that you want Draggable to fire a different event before onPress...and not run its onPress logic (even though there's a press)? Again, I'm struggling to understand the logic here (likely because I'm in a bit of a rush and not able to fully concentrate at the moment). Any chance you could explain it like I'm a 5-year old?

I didn't quite understand your (2) - isn't that behavior exactly what Draggable already does? Hold your mouse near the edges and it keeps scrolling. The closer you get to the edge, the faster it scrolls. As for centering it when the element is thrown outside the bounds of the wrapper, I updated the codepen to show you a technique for doing that: I hope that helps!

Perhaps you could insert dummy text where the spaces are needed and wrap it in a span with visibility :hidden

Just ran into this as well, thanks for the solution!

Hello Tomer, I got your invite - I shall try to have a look on my way home today (which will be soon). Hopefully it will be something simple. Stay tuned.

I proud to announce that I finally published first release. Many thanks to all of you who send me feedback! @davi Thank you for detailed feedback, Unfortunately current release is Windows only but I plan to add Mac edition in the future. Yes, app have it's own file format but the exported document is single html file with embedded js\svg\images. The only external dependence is GSAP library. I don't see any benefits in placing everything in single svg instead of single html and I'm afraid it can cause browser compatibility issues. Unlike bodymovin\Animate CC I''m trying to make result jscript easily readable\editable so I think it's possible to add some "snippet generation" workflow in the future. @Oliver16Years I spent some time trying same animations in code and in visual editor and I have to agree with You that if you work on complex animation and you know your animation library very good things can be faster with manual coding. I must admit that first version of my tool is mainly for people who can't code or don't want to learn GSAP syntax. But in general I still believe that one can be very productive using sophisticated visual tool. I hope I will be able to prove this with future releases of my app.

Thank you! It did and the animation passed through QA! Thank you for your support and for your product.

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.

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.

@ard.weisrock we're hoping to push 1.20.5 out officially this week. Stand by for that

Aha! I see what you mean now, and I think I figured it out. Angular was somehow loading GSAP before "document" was even defined, thus when it internally cached that as a variable, it was undefined. That explains why you were able to see "document" right before you did your tween, but it still wasn't defined inside GSAP. Kinda weird that Angular would do things in that order, but I think I've got a workaround in place in the upcoming release (due out VERY soon). In fact, we're also switching to ES modules in the default package that'd distributed via NPM, and that seemed to resolve things anyway. Please give these files a try: https://greensock.com/temp/GSAP-ES6.zip Better? Notice there's a "umd" directory if you still need that older style, but I don't think you will. ES modules appear to work great in that environment. Please let me know if those updated files resolve the issue for you.

Thanks for the help! @Sahil and @GreenSock. convertToPath really helped a lot and that post by pointC was very usefull to me also.

Thanks Sir @Dipscom

I'm a still a bit fuzzy about the continuity but I think I got what you want with the dragging. It's going to require a bit of logic to keep track of the progress of the drawing and make the necessary adjustments to the dragging of the knob. Having said that, it sounds like an interesting problem to tackle. Right now, I cannot, but I might have a stab at it later on.

You don't need to use GWD for DoubleClick. These are the steps you need: https://support.google.com/richmedia/answer/3526354 Full documentation: https://support.google.com/richmedia/answer/2691686 Hope it helps!

I've been using JS for like 8 years. I started out making games with canvas, which I think really helped me out. Once you understand JS better, it's more about problem solving than anything else. Some people think I'm really good at math, and I don't know how to respond to that. Maybe at one point in time. I took a lot of math classes in college, but I also forgot everything. Almost all of the math I use revolves around a couple trig functions and the Pythagorean theorem, and I've used them enough to where they are burned into my memory. When I need a refresher, I turn to Keith Peters and his coding math videos. He uses canvas, but the concepts will work the same with HTML and SVG. https://www.youtube.com/user/codingmath/videos Here's some really good advice on math and JavaScript. You don't have to be a whiz, you just need to know how to google. https://codepen.io/rachsmith/post/hack-physics-and-javascript-part-3-springs-and-some-other-things And don't be afraid to experiment. Everybody writes bad code, and everybody starts out at the same level. I was a total n00b at one point in time.

That's pretty weird, but believe it or not it's totally unrelated to GSAP. It seems like you've got an edge case with your artwork that exposes a rendering issue in the browser when it reaches exactly opacity:1 and the browser snaps it into a different state. The solution is to animate to an opacity of something like 0.99 instead of 1 so that the browser doesn't do that weird snapping thing with the way it renders it graphically. So you could do a fromTo() tween that goes from opacity:0 to opacity:0.99 for example.

EDIT: Notice that a flicker may appear in some of these demos. This a hardware acceleration bug Chrome. You don't need any smoke and mirrors for this. You can create circular motion using Sine.easeInOut, and circular motion is a wave... Look what happens when you plot the x and y values separately. Beautiful waves! Here's how you can do that with SVG. I'm just animating a bunch of SVGPoints on a polyline that are set to slightly different progress values. The amplitude is the height of the wave. The frequency is the distance between waves. And the number of segments is how many points will be added to the polyline. You don't want too many as that can make your animation run slower. Just enough so it looks smooth. You can animate the amplitude and frequency by applying an ease to them. Every ease has a .getRatio() method, which you can use to get the easing value. So if you wanted to animate the amplitude, you could do something like this... point.y = amplitude / 2 * Power1.easeIn.getRatio(norm); To make things interesting, I wanted to test out the CustomEase tool that's going to be coming out soon. I came up with a simple ease that looks like a bell curve, so it starts and ends at 0. Here's how that looks when applied to the amplitude. You can also apply an ease to the frequency/progress value, and even change the shape of the wave. If you reverse your animations, the smooth wave connection gets flipped, creating a pretty interesting sawtooth wave. Related post with other rendering options...

Yea that code doesn't give much of a picture of what's actually going on (it's just tweens, not what's interfering with them). Here's two examples to show the behaviour I think you're seeing Correct: http://codepen.io/jamiejefferson/pen/ogBOOV Incorrect: http://codepen.io/jamiejefferson/pen/zxNXXa If the page is being modified in the "incorrect" way, then the tween has lost it's reference and can't be used anymore. You will need to create new tweens of the new elements to replace it.