Leaderboard

Hey @OSUblake Nice. I am learning about this library. This would help get to know how to format animations properly. @mikel Thanks as well. Really nice support. Cheers.

I played around with React and Redux once... ? Too many rules and constraints, and I like touching the DOM, so I set out to find something better. That's when I came across some nice VDOM alternatives, lit-html and hyperHTML. They're faster, more efficient, and accessing DOM nodes is perfectly ok. It's definitely worth checking out. Here's your simple list of elements demo using lit-html. Codepen doesn't have syntax highlighting, but there are plugins for that on VS Code.

To animate a clip path in IE/Edge, you will need to use SVG. And I don't know why you would need to use snapsvg. It would be very easy to animate a diagonal clip path with GSAP. Just animate the points of polygon using the AttrPlugin. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon https://greensock.com/docs/Plugins/AttrPlugin And look at the thread @PointC linked to. I'm using the src from regular HTML <img> tags on SVG <image> tags. For srcset, you would use the currentSrc property, with a fallback to the src property if that doesn't exists. var xlink = "http://www.w3.org/1999/xlink"; svgImage.setAttributeNS(xlink, "href", htmlImage.currentSrc || htmlImage.src);

Here's the thread about that pen... This is bascially all that tween is doing. It doesn't last long enough to actually animate anything. wave[0].setAttribute("d", drawPath(drawPoints(factor * settings.speed))); It really doesn't matter if you could touch the tween, pausing and resuming would make the animation jump because it's using the amount of actual time that has elapsed for the factor. var factor = totalTime*Math.PI; If you want, here's my waves demo from that thread with play and pause functionality.

Hi @iamjkdn , Welcome to the GreenSock Forums. Wavify is a graphically elegant solution. If you want to act with just one Timeline and create some individual waves via SVGs, this could be an alternative solution: Happy tweening and waving ... Mikel

I think you're looking for totalDuration(). More info: https://greensock.com/docs/TimelineMax/totalDuration() Happy tweening.

Welcome to the forums, @colouredFunk. Like @Carl, I'm a bit confused and I'm eager to see a demo. I'm sure we'll be able to explain the behavior once we see that. Just keep in mind that endTime() is in relation to the parent timeline's playhead position (where it'd be when the nested timeline ends).

I have had video play in banners using the Youtube API or just the HTML5 video tag. If you send me your email address, I will send you the modified HTML file that combines the video with the Animate generated HTML file. Back in the actionscript FLV days, videos did stream from Flash servers. I may be wrong, but Netstream seems to apply to actionscript. I used the DCM HTML5 validator and determined that including a video in your zip fails. So both successful video banner campaigns, had video residing elsewhere. (Youtube or AWS or Doubleclick Studio assets.

Difficult to tell what it could be without having an example posted or the authoring files on hand. Perhaps try uploading all the files to a server and then checking it. Worst case, you can always just pop an HTML video tag on top of the canvas tag that Animate generates and use that instead of the video component.

Hi, We CodePen-safe versions of all our plugins and *special* eases. You can learn more about that here: https://greensock.com/try-plugins and see a demo that makes it easy to copy and paste the urls of the tools you need. The url for CustomEase is https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js I didn't notice any performance issues in your demo, but yes its generally recommended that you animate x instead of left. Not sure why that was difficult. I think it would be best to take a few steps back and try to solve that. Perhaps you can make a much simpler demo that illustrates why you couldn't set the x of a single particle.

Hi and welcome to the GreenSock forums, On the HTML5 / JS side we have the ModifiersPlugin which is perfect for this. See second demo on this page: https://greensock.com/modifiersPlugin Prior to the ModifiersPlugin you would do something like tween a value of a generic object, use and onUpdate to clamp that value (force it into a range) and then apply that modified value to the property of the element you want to see moving. Below is a "non-modifiers" version of that general concept. You'll notice that I'm tweening x to -1000, but the box only moves in a range from 0-100. We don't have a ModifiersPlugin for AS3 as we stopped developing and supporting the AS3 version of GSAP many years ago. However, you should be able to do the same thing with an onUpdate callback and generic object in AS3.

Yes it is possible. If you look at the links I provided, you'll see how to create a morph and how to trigger an animation on scroll.

Wargaming is looking to hire an HTML5 Animator (Banners) to join the Interactive Media Team. In this role, you will create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate), resize and adapt them for various advertising platforms, and manage localization of resized/adjusted banners. The Interactive Media Team help bring new players to the Wargaming universe by delivering quality marketing digital assets: landing pages, promo web sites, animated and interactive web advertising, newsletters, and more. What you will do: — Create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate) — Resize and adapt banners according to technical specifications of different advertising platforms (Google AdWords, DoubleClick, Yandex, etc.) — Localize resized and adapted banners (30+ languages) using internal tools Requirements: — Experience creating banner ads for a variety of advertising platforms with different technical requirements — Skilled in creating complex animation, interactive features (both within the 150 kB limit) and realistic special effects (blowups, water, fire, dust) using HTML/JS/Canvas — Hands-on experience with Adobe Animate — Knowledge of browser specifics (especially IE10+) — At ease with 2D graphics (bitmap, vector); proficient in Adobe Photoshop and Adobe Illustrator — Experience working with GSAP library — Portfolio — Pre-Intermediate or higher level of English Desirable: — Experience creating games using HTML5 — Knowledge of WebGL 3D — UI/UX expertise — Experience working in the games industry — Knowledge of Russian Motivating video about why we cool Our portfolio Please, apply here

I'll work on that for version 3.0. Still researching time travel algorithms. Kinda sick of cleaning up after these monkeys though. Sheesh.

endTime() is like startTime(), but for the end Like, if a 2-second animation has a startTime() of 1, then its endTime() would be 3 (assuming a timeScale() of 1). Make sense?

Yep that has solved it! Not sure a what endTime() was doing?

Sorry to hear about the frustration with the deadline looming. I know the feeling - it ain't fun. I wish I had an answer for you, but we really try to keep these forums focused on GSAP-specific questions, not general banner ad production help. Maybe someone else here wants to chime in (which is great), but otherwise I'd recommend posting in another more appropriate forum. If you've got a GSAP-related question, we'd be happy to help.

I guess you could try removing the yoyo:true from the tween. This way they will not return to their starting position. They will only move from top left to bottom right.

Not really sure what you want. Animating diagonally is just a matter of updating the x and y at the same rate OR rotating the parent (as suggested in previous posts). I don't do a lot of canvas animations but the demo below should get you closer to what you want.

It's looking good with HTML. SVG is a different story. An <svg> element can be made draggable, but throws an error with a bounds. const svg = this.shadowRoot.querySelector("#svg"); // OK Draggable.create(svg); // ERROR Draggable.create(svg, { bounds: this }); Trying to make anything inside an SVG draggable will create an error, regardless of bounds. const ball = this.shadowRoot.querySelector("#ball"); // ERROR Draggable.create(ball); // ERROR Draggable.create(ball, { bounds: this });

Hi @mikel Sorry, my response wasn't about your demo. It was for @Salmen as he mentioned changing sources for the images which is what Blake is doing in that radial demo.

Hi @PointC, In fact it was @OSUblake who wrote this excellent code - see my reference in JS. Kind regards Mikel

Sounds similar to what @OSUblake did in this thread. That should get you started. Happy tweening.

Hi @Salmen, maybe so - sorry, have overwritten the pen: Take a coffee - have an idea ... Mikel

Hey @satyam, The ruling: like boys / girls first. Please prepare an example (CodePen) as far as you can. Then surely a helpful hand will come. Kind regards Mikel

Hi thank you , Must file load ''ScrollToPlugin" in file js.

Hi @OxXxigen did you consider using Cross Document Messaging to emit whatever data you want from draggable to be shared between the page and the iFrame? I think you can use Draggable in whatever place you need, track the necessary information and pass it as a message down to whoever needs to react to it. Never done it myself but from what I understand of the theory, it should be possible. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.

I have an issue similar to @OxXxigen which I think should be investigated. Draggable creates the same error when inside a Shadow DOM, which works a lot like an iframe. However, one difference is that when inside a Shadow DOM, the parentNode might be a document fragment, so the host element might be the actual parent. draggableTarget.parentNode.host; See the error in this demo. If you remove the "create-shadow" attribute, it won't create a shadowRoot, and everything works fine. <!-- Has shadowRoot, creates error --> <my-draggable create-shadow></my-draggable> <!-- No shadowRoot, no error --> <my-draggable></my-draggable> And check out the ES6 import in that demo. Look ma, no webpack! ?

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.

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.

How's this @smallio Create your blob like so. The options should be easy enough to understand. var blob1 = createBlob({ element: document.querySelector("#path1"), numPoints: 20, centerX: 500, centerY: 500, minRadius: 300, maxRadius: 325, minDuration: 1, maxDuration: 2 });

Sounds like maybe you just forgot to load the ScrollToPlugin file? If not, I'd echo Jonathan's request for a codepen demo so we can poke around and see what's going on.

I think this is going to become a much more highly requested feature as mobile quickly takes over the world. I'm making an an animation where on desktop it animates almost exactly the same as it does on mobile. It is a fairly complex animation with many tweens in the time line. The easiest way to make the tiny alterations to the mobile version of the animation is to make a complete copy of the time line and then alter the copy while leaving the original in tact. This is absolutely terrible for maintainability though since it introduces a huge amount of code repetition. Yuck! XP This is how I imagine a conditional tween could be introduced into GSAP: var a = 1; var b = 2; var TL = new TimelineMax(); TL .to('#element', 1, { opacity: 1 }) .to('#element', 1, { scale: 2, condition: a == b }) //if a = b include this in the timeline, else ignore this step .to('#element', 1, { opacity: 0 }) ; This is how I currently do the equivalent of that (note the code repetition in the first and last steps): var a = 1; var b = 2; var TL = new TimelineMax(); if (a == { TL .to('#element', 1, { opacity: 1 }) .to('#element', 1, { scale: 2 }) .to('#element', 1, { opacity: 0 }) ; } else { TL .to('#element', 1, { opacity: 1 }) .to('#element', 1, { opacity: 0 }) ; } The .shiftChildren() method sounds like it works but it's extremely unintuitive and confusing, especially if you have to do it with a timeline with a huge number of steps in it. We really need a simple out-of-the-box way of doing conditional tweens directly in a GSAP timeline.