Leaderboard

In keep flying you were using absolute value so wrapper would only animate from 25 to 360. You need to use relative value instead "+=360"

backgroundColor is a css property and has no meaning in the Animate CC / EaselJS world. You can use the EaselPlugin to animate color effects in Animate CC from the EaselPlugin docs: //tween the tint of the circle to green and scale it to half-size TweenLite.to(circle, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}}); https://greensock.com/docs/Plugins/EaselPlugin You can load the EaselPlugin from this CDN URL https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/EaselPlugin.min.js

I don't know of any specific problems in FF48, but isn't that a two year old version? Maybe tell the client to update their browser. I didn't really know where to look on your website. If you could make a demo, we can take a peek for you. Happy tweening.

Hi and Welcome to the GreenSock forums. Unfortunately is not very clear (to me at least) what you're trying to achieve. Please take a look at this in order to create a reduced sample of your issue or an approximation of what you have in mind so we can better help you: Happy Tweening!!

No problem. Thanks for letting us know you have it sorted out now. Happy tweening.

Forget it, I'm not even reproducing the problem in browserstack, I should have check before bothering you. Sorry for the lost of time.

I was overthinking I guess, here is similar effect using Bounce.

In order to use CustomBounce, you also need CustomEase. And yes, they should both work in Animate CC. The demo Sahil provided should be plenty though for you to experiment and get the exact effect you want. I'm not really sure what that is, but here is another using a yoyoEase which allows you to specify any ease you want for the "reverse" part of a yoyo animation

I don't think you can target fragments in the shadow DOM. Please read this article https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Here is the fork,

Easiest way to do achieve that would be using CustomBounce plugin. https://greensock.com/docs/Easing/CustomBounce

You are using codepen only link, that won't work locally or on other sites. CustomBounce is part of club plugins https://greensock.com/club. You can also edit and create custom ease using ease visualizer https://greensock.com/docs/Easing, you will save a lot of time using CustomBounce and other plugins that come with club membership.

You can modify following example by @OSUblake from another thread,

This is more of an offering for anyone interested in playing with it. In my app, I'm allowing users to pick a font-color and 2 shadow colors to form a shadow gradient. Using hsla color is the easiest way for me to parse through colors and alpha settings so used that. What I ran into doing a simple diff calculation of the color hue numbers was often an ugly rainbow gradient. For example, if you want to start with a hue of 350 and blend to a hue of 10 ( which are both in the red family), the closest path is 350 -> 0 -> 10. So, you can't just subtract 10 from 350. The codepen has some conditional code that finds the closest path. If this helps someone, that's great. Just wanted to share. I know it could be greatly refactored though, so, if anyone wanted to fork and refactor, or offer a better solution, please do!

Just change the background color.

Animation along path will just rotate them in 2d, if that's what you want to do then you can just rotate element by offsetting transform origin. But it seemed like you were going for 3D effect, which is why I specified 3rd link. You need perspective on parent element and transform origin on the elements. So when you animate rotationY, the elements will rotate in 3D. To change the speed based on mouse, you can change the 'timeScale' of individual tween or timeline. When I was starting with GSAP I experimented with something similar, it was just 3D cube. It is not really what you are trying to do but it should give you some idea. There is also a blog post by Chris Gannon for somewhat similar effect and explains how to set up your divs. https://greensock.com/cube-dial-tutorial

I think by now you know this forum is an amazingly friendly place. We’re all trying to help you. Can you imagine any other online communities that would have let this thread go on for 4 pages and 80+ responses? I have been exactly where you are now. I had lofty goals and big JavaScript ambitions, but hadn’t put in the work. I had many false starts and a copy/paste mentality. I wrote a whole thread about my JavaScript journey in hopes that it would inspire others to do what I did. Make that decision to truly learn to code your own projects. I certainly don’t know everything, but I know so much more than I knew a few years ago and I can tell you from personal experience, the work is worth it. Once everything starts clicking for you, the coding frustration turns into fun and the possibilities are endless. I encourage you to follow the advice everyone has offered. Read the GSAP blog & docs and visit the learning area. Bookmark all the links @Jonathan has provided. Create your own simple demos. Reverse engineer the work of others. If you don’t possess the skills, knowledge and experience, you must admit that to yourself. I’d go so far as to say forget everything you know (or think you know) and start from scratch. Take the basic online JS and CSS classes and don’t move on to intermediate or advanced lessons until you completely understand every concept. All we can do is point you in a new direction and offer encouragement. The rest is up to you. Best of luck to you.

@Robert Wildling, Good article @Carl! Also, a tip, when animating symbols, or sprites, it is vary useful to use CSS Custom Properties, so that you can animate a specific instance of the symbol or sprite, rather than all of them at once.

Ok, figured it out. It did need to be a fromTo. Here's a fork from the original:

I'm not sure as I'm not at all familiar with Animate. What actually has the background color in your project? The movieclip or the child shape? Can you target that shape? I wish I could be more help. Maybe someone familiar with Animate will have a better answer. Happy tweening.

Ya you can ease the progress of target tween or timeline. Create a paused timeline and on scroll animate the proxy tween so you can use it's progress for animation. var proxyTween = TweenLite.to({}, 1, {paused: true}); TweenLite.ticker.addEventListener('tick', function(){ var progress = timeline.progress(); progress += (proxyTween.progress() - progress) * ease; // ease can be anything from 0.5 to 0.01 timeline.progress(progress); });

I figured I better stop in and tell you why I disappeared from the forum and didn't join up yet. As I kept trying to study over at Khan-academy, I kept getting more mixed up and confused in the sense that without knowing math I was not going to be able to finish that course, nor could I write good code without knowing the basic elements of the material, as the lessons skip forward quite quickly. So I am homeschooling myself to learn what I do not know so I will be able to proceed in coding with all the animations and elements needed to be on track. As I looked to your kind instructions I knew I needed to go back to school and so I am in fourth grade math leading up to pre-algebra, then algebra I & II. Then a bit of geometric concepts to round it all out. Then I will be back to learn more and truly understand what your trying to teach me. I really appreciate all the comments and the help you offered and provided even though my work was on another site. Hope to be back before the next year is over. I am studying hard and math is starting to make some sense. Thanks a lot for being so nice.

Hi Kerstin, You have pretty much answered your own question. And you have scaffolded your code in your example nearly all completely correct. First I have a question: is there any reason why you are doing a querySelectAll on your toggles? Is this because you plan to have several toggles? As to what you need to do to achieve your desired effect is simply to create the animation you want to play in your 'tlback' and change your click event to something like the following: // This really should be outside your forEach loop let open = false; function accordionToggle() { // Note the zero inside the method call, to make sure we always start the timeline from its start open ? tlback.play(0) : tl.play(0); // Toggle the open state to its opposite value open = !open; }

@PointC Thank you so much! Going to try and implement this now, really appreciate all the help here, still just learning this Greensock stuff so this has been very helpful.

I just re-read your question and if the circle expansion should transition the text from solid to gradient, a clip-path might be a bit easier here. For that you'd just use two versions of the text and animate the clip-path circle and regular circle together. Something like this. Happy tweening.

Yep - no matter what method you choose to do this ( stopColor, offset, mask or clip-path), you'll need to have the gradient in your HTML with the SVG. Happy tweening.

So from my understanding, somewhere in the HTML I need to call the gradient that I will eventually fade into? Thank you all for your help and responses!

Thanks everyone for your help, it's been really helpful. Coding in Animate is such a steep learning curve, but i do think using the code makes such a more refined animation than the timeline. To be honest, i could have done the button in 10 minutes on the timeline, but I wanted to push things a bit using GSAP! Thanks again

Yeah, I read the post at least 5 times and I'm lost. We'd love to help, but like @Rodrigo said, a demo would REALLY help. As for how easy something would be in GSAP, it'll pretty much handle any animation task you throw at it. Just keep in mind that it's an animation library - it's not an app framework or anything like that. Happy tweening!

Thank you so much! Exactly what I wanted.

Not that I'm aware of. The best community are the forums actually. Normally everyone tries really hard to help users as fast as possible (as @Sahil just did) and we always do it with a friendly touch. Don't be afraid of asking GSAP related questions here, that's the whole reason for the forums. Also there are not stupid questions around here, this is definitely not StackOverflow where you'll get down-voted for your questions. So if you have questions, just post them here. Finally keep in mind that there are over 52,000 posts here, so do a detailed search, because there is a good chance that whatever you're struggling with, has been answered already, like you just did of course Happy Tweening!!

after deep check ho yes it allowed , It because a was searching for the classic big paypal button haha ! if i remember , tweenMax block on nwjs and vsCode or if is just plugin ? am not remember. But now i see paypal, i will get it . thank for your time.

It seems SVG doesn't support offsetHeight. So you can instead using getBoundingClientRect to get height.

If you don't see anything that meets your needs Studio does have chat. https://www.google.com/doubleclick/studio/ Expandables that deploy once without user interaction, and then contract to a pencil, that allows reexpansion on click, are called pre expandables. The 970x250 one is called an IAB billboard.

Hi Winnie, The HTML5 expandable templates should include that as it is a requirement that those types of ads have a frequency cap. Have you checked out the DCRM template database?

BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work.

Hi @shMattyP93 Welcome to the forum. This is an answer from another thread, but it should show you the basic technique of one way to do it.. You could also do it with a mask or clip-path. Happy tweening.

Hi guys, There is always another way. And that is not an alternative truth! Have a nice day ... Mikel

Guys, there's no need to fight! Meet in the middle and become BFFs with custom elements/web components. Vue can actually compile components into web components. https://custom-elements-everywhere.com/ Preact and Vue using a simple store. React currently can't pass props to an element ? Source for the animated icon. https://codepen.io/osublake/pen/42fcd8f6a6be8634c9fd261f811a3478

@DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: Here's the helper function : function multiTo(target, duration, vars) { var tl = new TimelineMax(vars), copy = {}, reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1}, val, i, p, d, v; //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline for (p in vars) { if (!reserved[p]) { copy[p] = vars[p]; } } for (p in copy) { val = copy[p]; if (val.push && val.length) { d = duration / val.length; for (i = 0; i < val.length; i++) { v = {ease:copy.ease}; v[p] = val[i]; tl.to(target, d, v, d * i); } delete copy[p]; } } tl.to(target, duration, copy, 0); return tl; } And here's how the GSAP call would look: var morphing = multiTo('#morphing .polymorph', 2, { attr: [ { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' }, { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' }, { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' }, { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' } ], ease: Power1.easeOut, repeat:-1 }); Basically it just interprets an array of values as if you want them equally spaced inside the timeline. Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. Anyway, is this what you were looking for?

Hi @alexandrebuffet and welcome to GSAP! One method I've used in the past is to capture the timeline's progress, rebuild the timeline's tweens, and then set the timeline progress() back to where it was. Essentially I use a window resize debouncer to call a rebuild of the timeline after the resize is completed. The rebuild uses any new element dimensions to calculate tween parameter values and then send the timeline right back to the last recorded progress() value. I've simplified your scroller to just use mousewheel deltas (vertical and horizontal) to modify the timeline's progress to allow for the horizontal scroll (to remove the complexities of ScrollMagic in this example) to focus on what I'm saying. Resizing should demonstrate what you're after. The code isn't perfect ... I don't have time this morning to dig to deep ... but it should be a starting point for you.

Thanks for the demo. Very helpful. This actually took me awhile to track down. Seems the svg was malformed which was preventing TweenMax from loading. This video explains it better than I can in text: https://greensock.d.pr/7ae9jM

Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all

@Sahil This is great stuff. I have based my code on your demos and it's looking great! I made a new CodePen to illustrate what effect I was looking for specifically @Sahil Your latest code suggestions made it very easy to attain the appearance of a div "folding open", since it's based on percentages of the target div width and height. Very flexible and very stable. Thanks once again.

Great demos, Sahil!

@bparticle What I had suggested might not be good idea. It will cause you a lot of trouble to make it responsive. I went ahead and tried different approach, this solution is a lot cleaner and responsive out of box. What I have done is really good solution in my opinion but if you want to get best performance then you might want to switch to canvas. To optimize further, you can also remove ticker event when your timeline completes and just call the drawPoly function manually on resize. If anybody else has better solution please respond.

Not exactly sure what final effect you are trying to achieve. If it is just for single div, then you need your svg to have height and width same as your div. If you are trying to use SVG as background on multiple divs then you need to do slightly more calculations to calculate distance between svg x,y and div x,y coordinates. If you are planning to use some kind of background and use these polygons as clipping path then you need to do some additional math to convert viewport coordinates into screen coordinates. (if you are going to use viewbox attribute on your svg);

Another variation. This will let you interrupt the animation.

I got curious about this and enjoyed the challenge of making it into a single function that'll handle any number of points for you, so you can just feed in the string you want, the stagger, duration, etc. and it'll automate everything and spit back a TimelineLite instance containing all the animation Here's a forked version of Carl's: http://codepen.io/GreenSock/pen/fbb9dd44bf1c98a9842a6c05d6c1be2b?editors=0010 //this one function call does it all: staggerPoints("#hi", 2, {points:"100,-50 400,0 600,100"}, 0.5); //the work is done in this one function that spits back a TimelineLite. function staggerPoints(selector, duration, vars, stagger, onCompleteAll) { var numbersExp = /(?-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, element = document.querySelector(selector), startPoints = element.getAttribute("points").match(numbersExp), endPoints = vars.points.match(numbersExp), applyPoints = function() { element.setAttribute("points", startPoints.join(",")); }, copy = function(obj) { var o = {}, p; for (p in obj) { if (p !== "points") { o[p] = obj[p]; } } return o; }, tl = new TimelineLite({onUpdate:applyPoints, onComplete:onCompleteAll}), l = startPoints.length, obj, i; if (l !== endPoints.length) { console.log("Error: point quantities don't match"); } for (i = 0; i < l; i+=2) { obj = copy(vars); obj[i] = parseFloat(endPoints[i]); //note: we need to make sure the values are converted from strings to numbers. obj[i+1] = parseFloat(endPoints[i+1]); startPoints[i] = parseFloat(startPoints[i]); startPoints[i+1] = parseFloat(startPoints[i+1]); tl.to(startPoints, duration, obj, stagger * i); } return tl; } Play around with it and let us know if it works okay for you.

Hi Vanillabass, The good news is that TweenLite and AttrPlugin can now tween complex strings that contain a bunch of numbers. Please read http://greensock.com/gsap-1-18-0 (Section: Tween complex string-based values) So to move all the points on a <polyline> you can just do: TweenMax.to("#hi", 1, {attr:{points:"159.5,400 213.8,209 302. ... "}, repeat:10, yoyo:true}) http://codepen.io/GreenSock/pen/gPGOxL?editors=001 Note this path morphing only works if the start path and end path data have the same number of points. For the most robust SVG morphing imaginable, please see our MorpshSVGPlugin: http://greensock.com/morphSVG