Jump to content


Popular Content

Showing content with the highest reputation since 06/16/2019 in all areas

  1. 8 points
    Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based. Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--) Nah I don’t accept that, my post was basic. Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @OSUblake , @PointC , @Jonathan , @mikel , @Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q , ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all ! These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.
  2. 7 points
    Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.
  3. 7 points
    Hi @Demky Welcome to the GSAP forums! The issue you're seeing is because all of your Tweens are trying to run at the same time (using TweenMax). From what I see you'd be best using a Timeline (Max or Lite): see docs here: https://greensock.com/docs/TimelineLite var tl = new TimelineMax({paused: true}); tl .to("#whiteCube", 2, {rotation:360}) .to("#whiteCube", 2, {rotation:1440}) .to("#whiteCube", 2, {rotation:1800}); $('#whiteCube').on('click', function(){ tl.play(0); }); You'll want to note that the rotation values are all relative to 0 (not current rotation), so that's why I'm ending on 1080deg (1800 - 1440 = 360). Alternatively, you could set it to make the rotation add x degrees to the current value (by setting a var for current rotation and adding to that, etc).
  4. 6 points
    Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
  5. 6 points
    No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time. One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller. https://www.chromestatus.com/features/5162094739587072 https://github.com/bokand/root-scroller/blob/master/explainer.md Please let Apple know that you'd like have that feature.
  6. 6 points
    I have to ask about this. Cont = { val: 0000000000 }; Are you expecting the output to contain all those 0s, kind of like this? 0000000000 0000000001 0000000002 0000000003 ... 1710007692 If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17. See this article for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart But first, I would first store your counter element in a variable so you don't keep searching for it. var counter = document.getElementById("counter"); And then change the onUpdate callback to this. TweenLite.fromTo(Cont, 500, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { counter.innerHTML = (Cont.val + "").padStart(10, "0") }, autoAlpha: 0, delay: 0.1 });
  7. 6 points
    Hello and welcome to the forums! There are a few things that I'd change about your approach if I were doing it. The first thing that sticks out is your repeating of the long list of .from() animations on keyup and keypress. I'd make a function that I then call it from those event listeners. The second thing is that it seems like you just want the animations to play when the form is submitted. The way you're attempting to do that is through listening to the button click and the keys in the form. Why not just listen to one event - the form submission - instead? Vanilla JS and jQuery have methods to listen for that. In your demo I had to move the submit button within the form to get the click to submit it without extra JS. Thirdly it seems that you aren't changing anything about the long list of .from() animations when you call it, so I'd create the full animation timeline before you call it at all. That way you don't have to rebuild it every time and worry about it overlapping each other. In order to get the countdown (countup?) to work using .to() you need to reset the variable to its initial state. You could do that by simply declaring the following inside of your animation function: Cont = { val: 0000000000 }; Otherwise you could use GSAP's fromTo method instead of the .to() like so: TweenLite.fromTo(Cont, 5, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { document.getElementById("counter").innerHTML = Cont.val }, autoAlpha: 0, delay: 0.1 }); Altogether that would look something like this: https://codepen.io/GreenSock/pen/jjdXOg?editors=0010 Happy tweening!
  8. 6 points
    Let me point one thing out regarding this comment. The ClubGreensock and this forums are not related. Whether you have a membership to the club or not has no influence whatsoever on how you are treated in the forums or what type of answers your get or don't get. Everyone is treated equally, with the same courtesy and amount of effort to help. It might not be obvious to many but everyone here is giving away time for free. The money paid to be a member of the club goes to the development of GSAP tools, not for online support at the forums. The least one asking questions should do is: give as much context as possible, as simple an example as possible and make it as easy as possible for whoever is willing to help, help.
  9. 6 points
    Hello Gary and welcome to the forums! So glad to hear that you're enjoying GSAP. I'm not quite understanding what you're attempting to do. I think a demo of your technique would be helpful for us to understand and give feedback. See the below post for more information on how to create a minimal demo that we can see:
  10. 6 points
    What is happening is that on the resize event you are telling the element to scale .from() a particular amount. But, because you already set that scale on load, there's no visible animation. You should be using .fromTo() instead of .from(). Quick show: //default scale: 1 // onLoad trigger scale: from(1.25) > to(1) // note that the current scale of the element is now 1.25 // resize event scale: from(1.25) > to(1.25) // no visible change when scrolling
  11. 6 points
    It is good to see a fellow smiley face around here. You have one up on me, since my avatar does not have any hands. But that's what mustaches are for.
  12. 6 points
    Shhh .. I was trying to be discreet. 😉 <non-discreetness> But in full disclosure I meant to name drop and blatantly thank all those folks (+more) for all they do around here. Indeed most their posts are full of nuggets of gold. Anyone viewing this thread (13K+) please note the forum search and taking time to back read through any of these peeps posts is like GSAP gold just laying there. Pure GSAP goodness to be had by all, so be sure to profit from it. </non-discreetness> I thought it was fitting in light of the original tone of the thread.
  13. 6 points
    I honestly think you're chasing after phantom users. Be sure to check out some of your own analytics. You might be surprised at how rare real IE users are. And browsers ignore CSS they don't understand, so there is a fallback. a { /* FALLBACK */ color: #7F583F; color: var(--primary); } Also, you can serve pages based on the capabilities of the browser. I do this all the time for older browsers.
  14. 6 points
    Hello @Jaexplorer and welcome to the GreenSock forum! The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above. So technically calc() is not a property that is animatable, since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>. Please see the CSS calc() spec: https://drafts.csswg.org/css-values-3/#calc-computed-value https://drafts.csswg.org/css-values-3/#calc-notation https://drafts.csswg.org/css-values-3/#calc-syntax https://drafts.csswg.org/css-values-3/#calc-type-checking Happy Tweening
  15. 6 points
    Note sure about whether you can throttle a callback in that way, but you could probably make your tween behave the way you want with stepped Ease. https://greensock.com/docs/Easing/SteppedEase
  16. 5 points
    Hi @Demky, Please look at this page: https://greensock.com/docs/TimelineMax/reversed() .reversed( value:Boolean ) : Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. myAnimation.reversed( true ); //sets the orientation to reversed myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation Happy tweening ... Mikel
  17. 5 points
    You need to save a reference to your tween outside of a function. It's as simple as this: var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); If you need it to to be created by a function, you must return the tween. function loopedTweenMax(){ return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); } var myAnimation = loopedTweenMax(); Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely. https://codepen.io/osublake/pen/ZdgBYg
  18. 5 points
    Hello Nexal and welcome. As SARFEX commented, this can be done using cookies or localstorage (I'd not recommend using IndexedDB for something this simple). I'd search for something like "js tell if user has visited page before" to find more information about how to do so. Basic approach: Check to see if a specific cookie or localstorage exists. If it does, don't animate. If it doesn't exist, animate whatever you want to animate and create the cookie/localstorage that you're looking for. Let us know if you run into any issues, especially related to the GSAP part of your code!
  19. 5 points
    Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths. https://stackoverflow.com/q/13329125/2760155 It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff. So this will move it forward 50. logoAnimation.to('#Path_23', 4, { x: "+=50"}); Or back 50. logoAnimation.to('#Path_23', 4, { x: "-=50"});
  20. 5 points
    Hello @Goldendust20 and Welcome to the GreenSock Forum! I'm not seeing that "glitch" on Firefox and Chrome Windows 10. But if it was me I would convert your jQuery css() to the GSAP set() equivalent. So this way GSAP can keep track of what changes your doing outside itself: // So convert this jQuery css(): $list.add($clonedList).css({ "width" : listWidth + "px" }); // To this using GSAP set(): TweenLite.set([$list, $clonedList],{ "width" : listWidth + "px" }); Notice how i added multiple CSS selectors within the square brackets [ ] for the target parameter of the set method? GSAP set() : https://greensock.com/docs/TweenLite/static.set() Happy Tweening!
  21. 5 points
    I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .
  22. 5 points
    See the STARS acronym here. Your order is wrong, and you should use translate instead of drawing something at an xy coord. var originX = this.width / 2; var originY = this.height / 2; creative.ctx.save(); creative.ctx.translate(this.x + originX, this.y + originY); creative.ctx.scale(this.scaleX, this.scaleY); creative.ctx.translate(-originX, -originY); creative.ctx.fillStyle = this.fill; creative.ctx.fillRect(0, 0, this.width, this.height); creative.ctx.restore(); And more particle stuff.
  23. 5 points
    In addition to @elegantseagulls excellent advice, I'd add another approach to this type of animation is tweening the progress(). You create a tween or timeline with all your rotations and other properties that will animate in a paused state. Then tween the progress of that animation and add any in/out eases you like. In this case the actual timeline or tween with the animation should use a Linear.easeNone so it won't look odd. https://codepen.io/PointC/pen/gNyXEx Just my two cents and another idea for you. Hopefully it helps. Happy tweening.
  24. 5 points
    One recent post on here about something similar/related is this post: If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ). Maybe the guys who have been around the forums longer have other similar examples. If you threw together a demo of something you're wanting to create the guys here are often eager to help out
  25. 5 points
    Hello! There's still some of us around, trying to make a living. From what I've seen, and as @leolo69 has alluded to is that production budgets for display banners has dramatically been cut. A few years ago I was at a DoubleClick event where we talked about budgets, and 85% went to media, and only 15% for creative and production, my current estimates puts that figure at 6%. This leaves a lot of work being out sourced to cheaper labour markets. (I may or may not have had a hand in this, I hear a lot of cheap production houses are using Bannertime to scale up. Oops) I've seen more traction with dynamic banners, or data-driven creatives, with programmatic being the buzz word for the media side for a while now, clients are more interested in the cost savings that can be had by developing a set of banners once, and re-using them for several seasons. That being said there's always those gem contracts where there is loads of budget and a real desire to get creative! They're few and far between these days but here's hoping the market will shift back to creative! EDIT: I also haven't done a decent interactive/rich-media creative in ages!
  26. 5 points
    SEO would be affected if your using the CSS property display: none, visibility: hidden or even high negative or positive text-indent on your H1 or main content. But having elements use opacity will only hurt your SEO with a very important exception. As long as your not using display: none, visibility: hidden, or a high text-indent value on your main content, then I wouldn't worry about it. Just be careful when using opacity, display: none, or visibility: hidden... to hide the important main content with your main search keywords and H1 tag. So be mindful that you could get lower ranking when its your main keyword content! Since first Google will parse the HTML, and then will parse the rendering of it with the CSS and JS. But you can always use Google PageSpeed Insights if you really need to test your webpage to see if Google reports that it doesn't like a specific thing your doing as far as hiding content. https://developers.google.com/speed/pagespeed/insights/ Happy Tweening!
  27. 5 points
    Hi @JackyWang, Welcome to the GreenSock Forum. Interestingly case ... https://codepen.io/mikeK/pen/rEQRYL Happy tweening ... Mikel
  28. 5 points
    Hi @distrox, Welcome to the GreenSock Forum. .play(): Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play (0) or .restart() https://codepen.io/mikeK/pen/jjQerz You could use this QuickTip also. Happy tweening ... Mikel
  29. 5 points
    Hi @theastroco, Maybe it could go this way ... https://codepen.io/mikeK/pen/XLxLwz Happy tweening ... Mikel
  30. 5 points
    That's by design. The .call() at the end of the timeline fires when the playhead arrives at that time — not when it leaves. That's why that tiny empty tween after the .call() makes it behave as you'd like — the playhead triggers the .call() each direction. That's the solution I'd recommend. It may not seem like it makes sense, but imagine a yoyo tween. If you had a .call() at the end of that tween/timeline, it would fire twice in rapid succession. That probably wouldn't be what most people would want. Make sense? Happy tweening.
  31. 5 points
    React hooks is supposed to be an improvement? I don't get it. 🤷‍♂️ The way you have it, you're adding new animations to the timeline on every click. Create it once. https://codepen.io/osublake/pen/agjKrV Also, don't set transform origin with CSS. It's doesn't work the same in every browser.
  32. 5 points
    Please understand that we ask for a demo so we can see what you're doing. Even what is seemingly a basic question will get a better answer with a demo. You originally asked about a <circle> following a <line>. I didn't understand why you needed the Morph plugin to do that and that would have been my follow up answer once we saw your demo. We also didn't know if you were hand coding the SVG or exporting it from your vector software. As it turns out, you wanted the <circle> to follow a <path> and that makes sense that you would use the pathDataToBezier() method for that animation. It's all about context and we want to get you the best information and solution possible. Regarding your <path> direction problem: Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export. Hopefully that helps. Happy tweening.
  33. 5 points
    Thanks for the demo, it really helps show what's currently wrong with your project The main thing is that you are adding the functions to the timeline, not the actual returned timeline objects. You need to make sure to return the timeline in all 4 functions (you forgot in the last one) and make sure to call the function, not just pass in the function name, within each .add() call. So for example it needs to be .add(firstMainDisappears()), not .add(firstMainDisappears). After that we just need to clean up some of the timeline logic as some of it overrides others. I'm not sure exactly how you're wanting it to look, but one way would be to just reverse the animations when you hover the image like I did in the demo below. It also has the added benefit of simplifying it a bit. You might want something else in your actual project https://codepen.io/GreenSock/pen/RzBVLB?editors=0010
  34. 5 points
    Hey, I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients. https://codepen.io/elegantseagulls/pen/Oovbob
  35. 5 points
    Welcome to the forum @dylanlarrivee If you're speaking is this example: It looks like you could maybe just set the _gsTransform += half the size of the your desired rect dimension in the updatePath function. var x1 = handles[0]._gsTransform.x+10; var y1 = handles[0]._gsTransform.y+10; var x4 = handles[1]._gsTransform.x+10; var y4 = handles[1]._gsTransform.y+10; For instance if your rect is 20. <rect class="handle" x="0" y="0" width="20" height="20" /> <rect class="handle" x="0" y="0" width="20" height="20" /> Maybe that will help get you heading toward your goals, or someone else will have a better suggestion if thats not performant enough. This thread might be played out with custom requests though. I think @OSUblake specifically might be tired of it, similar to other threads, (ha, ha). 😆😀
  36. 5 points
    Haha. I get a kick out of watching people demand free stuff, and this "cultural thing" comment definitely takes the cake. 10/10 This is why we can't have nice things.
  37. 5 points
    Hi @mrrobot993, Just a rough direction - scroll ... https://codepen.io/mikeK/pen/QXdEjQ Happy tweening ... Mikel
  38. 5 points
  39. 5 points
    Your probably looking for the onDrag function: https://greensock.com/docs/Utilities/Draggable onDrag: Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening
  40. 5 points
    Hello and welcome. This question isn't very related to GSAP, but we'll try to help where we can. You're passing numberCol1 into every renderNumber function call, so it will always animate up to the value of numberCol1, which in the demo is 11 (it will go to 10 since it indexes at 0). I don't understand what data you'll be getting - why is the first entry different than the later entries? Will it always be in this format? Are you wanting all of the numbers to animate to their value with the same timing? How are you supposed to determine the index? Is it related to the number of entries (in this case 6)?
  41. 4 points
    Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active
  42. 4 points
    What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through? I think GreenSock's Twitter is a good place for inspiration. https://twitter.com/greensock That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™. https://codepen.io/osublake/pen/bOGMaG
  43. 4 points
    I should clarify that I only meant for SVG elements. Setting the transform origin with CSS for HTML element won't cause any problems.
  44. 4 points
    I wouldn't say it uses TypeScript. It just compiles it. TypeScript needs a code editor that understands it, which CodePen doesn't use. You don't have to use CodePen. That's just what we like to use around here because it's simple and straightforward. If needed, Stackblitz is a good for TypeScript. It uses the same code editor as VS Code. https://stackblitz.com/ Just remember to keep your demos simple. We don't want to see your project, just the problem. 😀
  45. 4 points
    @Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts. You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread. https://codepen.io/PointC/pen/MQvooQ There are also loads of filters available to you. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter <feComponentTransfer> looks like it could be a lot of fun in your project. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer Happy tweening.
  46. 4 points
    Yes, it's called only once. For stagger you need to use cycle. Check out the docs for cycle... (at the bottom) https://greensock.com/docs/TimelineMax/staggerTo And this... https://greensock.com/cycle Also, be sure to check out the learning section. https://greensock.com/learning
  47. 4 points
    https://canistop.net/ ¯\_(ツ)_/¯ I’ve happily read that in Bootstrap v5 they are dropping JQuery and IE 10 & 11 support also. Given its popularity, I hope each will help diminish the usage of both in the industry. IE is much like a roulette wheel with all red while trying to hit black. 😜 https://caniuse.com/#compare=ie+10,ie+11,edge+12,edge+13,edge+14,edge+15,edge+16,edge+17,edge+18,edge+76
  48. 4 points
    Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding. How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant. Don't worry Blake I'm sure there are plenty of users in the forum who are grateful for your help!
  49. 4 points
    There are some online stores that actually charge the customer an extra fee if purchasing within Internet Explorer.
  50. 4 points
    If you want to animate calc, then use CSS vars kind of like this. https://codepen.io/osublake/pen/OvbqXL If you need more help, please provide a demo. Pictures are not helpful.
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up