Leaderboard

Thanks for the demo. Very helpful! GSAP is great for this type of control. You can tween the timeScale() of an animation. var spinA = new TimelineMax({paused: true, repeat: -1, delay:0 }) spinA.to("ol",5,{top:-210, repeat: -1, ease:Linear.easeNone}) spinA.play() $("input").click(function(){ TweenLite.to(spinA, 1, {timeScale:5}) }) Read: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca to learn more about tweening progress() and timeScale() (demos too!)

Sorry, but Draggable wasn't intended to be used in this manner (content inside a child iframe). There are quite a few security issues that arise in cases like that, and I think it'd be much cleaner to just use Draggable inside of the iframe itself instead.

Hello @Jemes Any reason why your trying to animate a to() tween with a duration of 0.01 seconds. I don't see how a duration value that small can visually be animated. The duration value might as well be 0, did you mean to use a set() instead of a to(). But like @Carl advised a codepen demo example would be good if you would like us to assist you properly.

assuming each element has its own animation, you can just pause each animation at a random progress(). Since progress() is a value between 0 and 1 you can use someAnimation.progress(Math.random()) Below is a basic illustration of this idea. Each box has the same tween applied, but each tween is initially paused in a random position. I use a jQuery each() loop for comfort, but you can use any type of loop.

Please post a demo that clearly illustrates the issue. Unfortunately we don't have the resources (time) to repeatedly create demos in hopes that they replicate what you are doing. Thanks for understanding.

And that, everybody, is efficiency.

Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!

hmmm, I could not replicate your claim. I found that existing class names were not removed as shown below. Below you will see I add the className tall and the className red does not get removed. Perhaps there is something specific to how you are dynamically adding the existing class, but I can't test that without a reduced test case. Please fork the demo and modify it so that we can see what the issue is. The less code the better thanks!

Yeah I had a hard time following everything too. Maybe you could make a simplified demo with a few divs and just enough code to demonstrate the problem? I think that would really help get you some answers. Happy tweening.

You could use divs, canvas, SVG -- pretty much whatever you want. GSAP will animate the values perfectly. The question is which of those will perform the best? I also had the same question as @GreenSock: Are you asking someone to make that for you? I looked at some of the other questions you've posted about responsive animations, CSS etc. and my recommendation would be to go through the learning page https://greensock.com/learning to make sure you understand the basics of GSAP before attempting anything too complicated. Once you've done that you can start reverse engineering demos like the one you've posted. You'll learn a lot by doing that. Try rebuilding them from the ground up with GSAP. When you have GSAP related questions, we're always happy to help. Happy tweening.

I didn't quite follow your logic there - are you saying that solution is better than ScrollToPlugin? Keep in mind that ScrollToPlugin works around a bunch of browser inconsistencies plus it automatically handles cancellation of the tween if/when the user interacts with the scroll (imagine how annoying it'd be if they try grabbing the scrollbar while the tween is in progress), plus it works on the window as well. I'm pretty sure the solution you offered only works in certain browsers on certain types of scenarios. And actually, you could simplify it even more by setting autoCSS:false and animating scrollTop directly on the element itself (skip the whole onUpdate). But maybe I misunderstood what you were suggesting. Oh, and it's typically best to start a new topic for things like this rather than jumping into one that's almost 6 years old Happy tweening!

Sorry, I don't think I can help you. I really don't know what the end result is supposed to be or where to begin in trying to decipher all the array stuff. this.animate = function () { let tmparr = this.letters.slice(); tmparr = tmparr.concat(tmparr.slice(0,2)); const tweens = TweenMax.staggerTo(tmparr, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05,doNext,[],this); tweens.pop().repeat(0); function doNext() { let arr = this.letters.slice(); arr.push(arr.shift()); arr = arr.concat(arr.slice(0,2)); debug("array is",arr[0]); const tweens = TweenMax.staggerTo(arr, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05); tweens.pop().repeat(0); tweens[0].reverse; } } } Perhaps someone else will have some time later on.

I think it's a good idea, helps developers and businesses looking for them. From a marketing perspective, it could also be beneficial to Greensock. A hub for hiring could generate more awareness and acceptance for the platform. I would make sure you have some sort of messaging attached saying something to the effect that Greensock provides it only as a convenience and doesn't endorse any participants or have any responsibility for transactions. Was this a suggestion the service should be monetized?

[updated September 2, 2020] Good news: Google pushed GSAP to their CDN (for use with DoubleClick and AdWords ads). URLs can be found at: https://support.google.com/richmedia/answer/6307288#gs If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!

Welcome to the forums, @randometc. The SVG spec itself doesn't accommodate 3D, so what you're attempting isn't really possible in most browsers. That's unrelated to GSAP. You can, however, apply a 3D transform to an <svg> element itself (not the guts of an SVG, just the outer element).

Draggable does a lot of calculations under the hood to manage bounds and collisions (even inside transformed parents). I'm almost positive Draggable was not designed to be injected into an iframe from a parent. iframes are usually bad news when it comes to any sort of communication between the iframe and its parent as browsers have all sorts of security measure in place to prevent malicious activity. We'll see if there is a reasonable fix, but I'm doubtful this will be considered a legitimate bug. If you are loading Draggable from the same location it will most likely be cached and really not impact load performance at all. Thanks for posting and for creating the demo. If we find this is something that can be fixed we will post back here.

Good Morning! We now have a Jobs and Freelance board sitting with the other HTML5 / JS sub-forums https://greensock.com/forums/forum/10-html5-js/ Thanks for all the great suggestions and the votes for moving ahead. Yes, we agree there are some small risks, but the potential for this leading to positive results for the community seems to outweigh those. We created some basic guidelines to help manage everyone's expectations and start things running smoothly. We'll give it a shot and adapt as necessary. Thanks again for all your help!

Welcome to the forums, @chiho. Is your goal to use only GSAP and <div> elements or something (no THREE.js)? You're asking someone to rebuild that whole animation for you?

I just visited the page you posted, opened Chrome Dev tools and pasted in the code you provided and saw the animation. That proves TweenMax is loading. It looks like you are loading your custom.js is not loading as it is in a link tag and not a script tag <link rel="stylesheet" href="https://www.hsdafordiversity.org/templates/hsda/js/custom.js" type="text/javascript" /> Don't worry, we've all made these types of mistakes.

First of all, welcome! Hang in there, you'll get it working and then you'll really enjoy the tools The x: 80% is invalid JavaScript - you need to have the percentage value in quotes, like x: "80%" because of the "%" sign. And actually, if you're doing a percentage-based translation, it's recommended that you use xPercent instead of x: //works, but can be problematic in a few edge cases: x: "80%" //best: xPercent: 80 Does that solve things for you?

staggerTo() creates and array of tweens. You can grab the last tween and set repeat(0) var tweens = TweenMax.staggerTo("div", 1, {x:100, yoyo:true, repeat:1}, 0.5); tweens.pop().repeat(0);