Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. OSUblake

    OSUblake

    Moderators


    • Points

      3,064

    • Content Count

      5,318


  2. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      2,482

    • Content Count

      2,416


  3. GreenSock

    GreenSock

    Administrators


    • Points

      2,359

    • Content Count

      14,280


  4. PointC

    PointC

    Moderators


    • Points

      1,961

    • Content Count

      3,561



Popular Content

Showing content with the highest reputation since 04/09/2019 in all areas

  1. 10 points
    A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.
  2. 9 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. 9 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 , @ZachSaucier @OSUblake , @PointC , @Jonathan , @mikel , @chrisgannon , @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.
  4. 8 points
    Hey Michael and welcome to the forums! Good work on your site. That is an interesting issue. I noticed that you used different selectors in the dev and production build. I also noticed that you seemed to be animating the .ys-shortcut class in production and that class is applied to both the li and the a of each of those items (and both the li and the a were being animated). So I used my dev tools to remove the .ys-shortcut class from the a and it seems to be working without the increased delay. So I'd recommend removing that class from the anchor and using some other method (like .ys-shortcut > a) to color the anchor text. Happy tweening.
  5. 8 points
    Sorry if it came off that way. I brought up CSS grid because animating tables can be very problematic. Tables were not designed with animations in mind, which is why you still have to use attributes to get some table elements to display correctly. And there is usually more than one way to solve a problem. Using CSS grid was part 1 of my recommendation. You called me a troll before I got to part 2 below. The gaps are caused because of rounding. An 81px wide element at a scale of 0.786 is 63.666000000000004 pixels. Not exactly a whole number, so you might see artifacts bleeding through. To get rid of those gaps, you can use will-change: transform; in your css. The browser can rasterize (take a snapshot) of the layout before scaling gets involved. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
  6. 7 points
    Hey @Robert May, this example could be helpful - its still gsap 2.0 https://codepen.io/mikeK/pen/ZwmdYv Happy tweening ... Mikel
  7. 7 points
    Hey, A prehistoric animation, no-scroll https://codepen.io/mikeK/pen/BaNPLNL Stay healthy ... Mikel
  8. 7 points
    Hi @invisibled, The duration of your tween won't make any difference here, as you are advancing the total progress of the tween from 0 to 1, so your duration number could be 0.2 or 100 and the result would be basically identical. I generally just set my duration to 1, so it matches progress in this situation. You'll also want to pause your timeline when you set it as well. Your math to get your duration math should be similar to this: // Get scroll distance to bottom of viewport. const scrollPosition = (window.scrollY + window.innerHeight); // Get element's position relative to bottom of viewport. const elPosition = (scrollPosition - el.offsetTop); // Set desired duration distance. const durationDistance = (window.innerHeight); // Calculate tween progresss (100vh). const currentProgress = (elPosition / durationDistance); I'd also recommend making the jump to GSAP3, if you can. You may also find this article helpful, as it covers similar progress math and a few other approaches to scroll-tied animations with GSAP (the bottom example of this article uses the scroll event listener): https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
  9. 7 points
    Yes, but why? Can you justify the need for React? No, seriously. A lot of devs think React is necessary for some reason, but my response to using React for a project is usually... (insert nationality) If you're new to JavaScript, then I would focus on the language itself, DOM APIs, and CSS. Those amazing sites you see aren't amazing because they use React. They're amazing because they use gsap and three.js. 😉
  10. 7 points
    Hey @alexandrosb, If you position all elements in one SVG - including the paths for the animation - you will definitely make it easier for yourself. https://codepen.io/mikeK/pen/WNvoyor Good Appetite ... Mikel
  11. 7 points
    It works in all modern browsers. https://caniuse.com/#feat=intersectionobserver For those who think supporting IE is a good idea, there are polyfills. https://github.com/w3c/IntersectionObserver Well this is a gsap forum, so I'm of course including gsap as a library. But you don't need any scrolling libraries when using the intersection observer. That kind of defeats the whole purpose.
  12. 7 points
    Eases are just functions now. var easedValue = Power2.easeIn( value ); Note that you can use use gsap.parseEase() to get the ease function from a string. var power2In = gsap.parseEase("power2.in"); var easedValue = power2In( value );
  13. 7 points
    Ok, here's a simple demo. If you can get a good looking path animation, then placing baubles shouldn't be too hard. You can use cubic beziers if needed, it just uses a different calculation. https://codepen.io/osublake/pen/7b238a209825cd951d768f41715b8fd7
  14. 7 points
    At its core, GSAP doesn't do DOM manipulation. That's what the CSSPlugin does, so yes, you can use the easing functions for whatever you want. Every ease has a .getRatio() method, where you pass in a normalized value from 0 to 1. var ratio = Power1.easeIn.getRatio(0.5); Check out this post where I use different easings to plot points for sine waves. If you need help normalizing a value, here's a little helper function. Just pass in the current, min, and max values. // normalize will return a value between 0 and 1 function normalize(value, min, max) { return (value - min) / (max - min); }
  15. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  16. 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).
  17. 6 points
    @chrisgannon did a nice one (as you describe inside a circle). https://codepen.io/chrisgannon/pen/xqwgPq
  18. 6 points
    Hey @Chronic, Welcome to the GreenSock Forum. You don't need ScrollMagic - just a little parallax logic and everything runs smoothly. And you could use the super GSAP tool motionPath to position objects. https://codepen.io/mikeK/pen/XWbwmZY Happy tweening ... Mikel
  19. 6 points
    Mhhh... I'm not sure if I follow what you're trying to do, but it could be a eased stop to 0 degrees? I remember a sample from @Carl about easing the timescale so partial credit to him, hopefully this is close to what you want to do: https://codepen.io/rhernando/pen/zYGeXEB The idea is to tween the animation instance's timescale to make it faster/slower and then in the stop button use the directional rotation feature of the CSS Plugin to rotate the to the shortest end angle. Now this only scratches the surface of this, since you still need to calculate, according to the current speed, angle and final angle, the time for the stop animation, that should be shorter or longer depending on those factors. Right now it stops the animation using a single time value which can look odd in some cases. Hopefully this is what you're looking for and helps you get started. Happy Tweening!!!
  20. 6 points
    Credit to who? That's a fork of one of mine. Just giving you a hard time. Welcome to the forum. Just another little nugget of info for you — you can also use a clip-path for this type of reveal. Masks can also use strokes and gradients so you can get all fancy with them. Here's a little example for you. https://codepen.io/PointC/pen/VwLVxwx Hopefully that helps. Happy tweening.
  21. 6 points
    Here is a similar one to the above which may also assist you, using click instead of scroll. https://codepen.io/osublake/pen/df06754f4736f45005fe693f3113049b It was discussed in the following thread (also a mouse wheel one). Below are a few other related pens which you might also find useful to look through. https://codepen.io/sdras/pen/dXoLEJ https://codepen.io/PointC/pen/OMabPa https://codepen.io/osublake/pen/oGoyYb ¯\_(ツ)_/¯
  22. 6 points
    You can animate the stop-color too. Here's a fork of your pen with some updates to GSAP3. Hopefully it helps. https://codepen.io/PointC/pen/vYOzeRZ Happy tweening.
  23. 6 points
  24. 6 points
    Hi, Adobe Animate outputs to canvas. transformOrigin is for a css property for DOM elements. When using Adobe Animate it's important to understand that you can only animate numeric properties of EaselJS Display Objects: https://www.createjs.com/docs/easeljs/classes/DisplayObject.html or values supported by GreenSock's Easel Plugin. In that list you will see regX and regY properties that you can set which is similar to transformOrigin. The regX and regY values are pretty much where the pivot point would be on your Movie Clip. One annoying thing is that if you change the regX or regY it also changes the position of the object. In the demo below I have to offset the position after changing the regX and regY The code below shows how I changed the pivot (or transformation) point. gsap.to(this.default_mc, {duration:3, scale:2, repeat:10, yoyo:true}); this.top_left_mc.regX = 0 this.top_left_mc.regY = 0; this.top_left_mc.x -= 25 this.top_left_mc.y -= 25; gsap.to(this.top_left_mc, {duration:3, scale:2, repeat:10, yoyo:true}); I've attached the fla to this post, but it is also available in my Adobe Animate for HTML5 "not a course" which is a bunch of source files I created to help people struggling with Animate (as I have). change-transformation-point.fla.zip
  25. 6 points
    Haha. I didn't see that, but yeah, gsap can do everything anime is doing. To convert it to gsap, all you really need to do is replace anime with gsap.to... // anime anime({}) // gsap gsap.to({}) change the duration from ms to s.... // anime duration: 380 // gsap duration: 0.38 and change the order of the parameters in the functions. // anime delay: function (el, i) { return i * 250; } // gsap delay: function (i, el) { return i * 250; } Well, that's all you need to do syntax wise. I don't know about logic wise as I didn't look what's happening inside the provided code as 300 lines of code is way too much for me to sift through.
  26. 6 points
    Nice slider @djcali congrats. But no one is gonna talk about the elephant 🐘 in the room of loading Anime to tween strokeDashoffset? 😜 Sorry I couldn’t resist, I just can’t remember seeing the two used like that. But you should be able to do the same with GSAP and only load one library. Maybe more people do this I just can't recall seeing it. 😃
  27. 6 points
    Fun little animation! The distribute util is the coolest thing ever, right @Carl ? Caching is a very good technique to improve performance, but I think an easier solution is to just record the ending transformations from the wiggle animation, and then create a timeline from those values. https://codepen.io/osublake/pen/6e1e0338d8708ea850166b8d0fafab4a
  28. 6 points
    Hey community, Here is the basic equipment: Combined with a walking switch which could be integrated in the smart home environment. In case someone is wondering, the switch is female. And this tree shaking is done by GSAP. My code for Christmas: gsap.to ('. well-being', {duration: 3 days, repeat: -1, yoyo: true, ease: "chillOut"}) ZACH will provide more detailed explanations in the Docs! Merry Christmas ... Mikel
  29. 6 points
    This is how ScrollMagic could be fixed for npm, but I'm not going to do a PR as I don't use ScrollMagic. https://github.com/janpaepke/ScrollMagic/issues/918#issuecomment-555457622
  30. 6 points
    Hey @Page Tailoring, Just do it ... https://codepen.io/mikeK/pen/WNNLbLZ Happy tweening ... Mikel
  31. 6 points
    Don't use new. You need a timeline to use add. gsap.timeline() .add( function(){ callMeMaybe(); } ) Again, no new. This is a tween. gsap.to(changemecontainer, {changethislilguy:30, duration: 1}) This is a timeline. gsap.timeline().to(changemecontainer, {changethislilguy:30, duration: 1}) gsap.timeline({repeat:-1, repeatDelay: 0.6 }) .to(depth,{value:30,ease: "power2.inOut", duration: 1 }) .to(depth,{value:0,ease: "power2.inOut", duration: 1}) .add(generateAndDraw); // is this supposed to be a tween or part of the timeline? gsap.to("canvas", {rotation:360, duration: .6,repeat:-1, repeatDelay: 2 }); Check out the release notes.
  32. 6 points
    Two alternatives. Use a delayedCall() or a dummy TweenLlite. https://greensock.com/docs/v2/TweenLite/static.delayedCall() const myCallback = function () { // code you want to execute when the time has passed }; const t = TweenLite.delayedCall(time, myCallback); A delayed call returns the TweenLite instance so you can use all the TweenLite/Max methods. A dummy Tween is basically an GSAP instance that takes an empty object as target and does nothing for a specific amount of time: const t = TweenLite.to({}, time, {}); Now you mention this: Seems to me that perhaps you're using a timeline instance (you didn't even provided a small snippet of code so I'm guessing here ), in which case the you can use the dummy instance or event better the position parameter: It would be nice to have some clarification of what you're trying to do. Happy Tweening!!
  33. 6 points
    Hi @Demky and welcome to the GreenSock Forum! That delay is slight and is that element with opacity being put on its own rendering layer after a snapshot has been taken. That is why it only happened on the first load so it can create that new rendering layer from the snapshot. Just keep in mind that if you have one parent, in this case .flip-card-back that has a child with a CSS property that creates a new stacking context.. like opacity. That you will often have to trigger a new stacking context on the parent (.flip-card-back) also, by adding either an old CSS hack of translateZ(0), an opacity: 0.9999999, or other CSS properties that trigger a new stacking context (see the below link). It is the same principle when you have an element with overflow: hidden and its child or parent has a transform or opacity triggering a new stacking context. The parent will not allow overflow: hidden to work unless you also give the parent a new stacking context with one of the CSS hacks. Then the parent will have overflow: hidden work as expected. Google Chrome has more bugs than IE used to ever have. So sometimes you will have to play with the CSS properties of transform-style, and blackface-visibility. But don't forget that Chrome will also act buggy depending on the perspective used. Whether that is the stand alone perspective property or even when you use the transform: perspective() function. I have found that the transform: perspective() function is less buggy than the perspective property in Chrome. The GSAP animation version probably has no issues since it is using matrix3d(), i presume. There is the CSS will-change property but that is a whole other bag of bugs. See @GreenSock (Jack's) explanation of will-change and its crazy behavior of over use. Plus Google Chrome will keep changing behavior of that so use at your own risk. CSS Stacking Context triggers: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context CSS Perspective Property: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective CSS Perspective Function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective Happy Tweening
  34. 6 points
    @mvaneijgen, @PointC is our SVG guru and his hint: 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. Maybe this pen (check the different 'starting points) is helpful https://codepen.io/mikeK/pen/mdbryWK Happy tweening ... Mikel
  35. 6 points
    Using a letter makes no sense. Numbers are your friend when it comes to repeating something... and so are loops. There are many ways to do a loop, and here is one. https://codepen.io/osublake/pen/c35a7a69af6a6db997249a6111e6f930
  36. 6 points
    Update: I added SVG to Canvas support! Example: https://codepen.io/LuckyDe/pen/pMrgwz You can now use straight svg point data and if you have the morph plugin you can also morph data and its in canvas! I took @OSUblake 's post implemented it into my library but I also added https://github.com/goessner/parseSvgPathData modified that so you dont need to use path2D so it works in IE I also added a cache system so on every frame if the path data is the same as the old one it wont update the for loop to convert it, it will just run the same draw function. So now you can add svgs like this var hat_dark_p = "M58.2,81c0,0-3.1-29.6-3.5-75.4c0,0,73.2-18.9,141.5,12.3l-10.6,71l55.5,16.4c0,0-75.4,58.9-241.2-15.1L58.2,81z"; var hat_dark = new el.svg({points:hat_dark_p,style:{fillStyle:"#1e3449"}}) and animate it like any other element - skew, scale, xy , etc And if you want to use the morph plugin you can just do var hand_l_p= "M0,105.3l27.8-77.9L42,53.7c0,0,13.8-23.2,50.2-53.7c0,0,38.9,76.2-37.5,129.5c0,0-5.9,3.8-12.1,7.2C34.2,141.3-0.6,134,0,105.3z" var hand_l_b_p= "M0,80.8l53.5-66.9l-1,24.8c0,0,25.8-23.8,64.4-38.6c0,0,14.2,51.7-62.3,104.9c0,0-5.9,3.8-12.1,7.2C34.2,116.7-0.6,109.5,0,80.8z" var hand_l_shapes = [hand_l_p, hand_l_b_p]; MorphSVGPlugin.pathFilter(hand_l_shapes); var hand_l = new el.svg({points:hand_l_shapes[0],style:{fillStyle:"#58cfcb"}}) TweenMax.to(hand_l,1,{points:hand_l_shapes[1],onUpdate:el.update})
  37. 6 points
    Welcome to the forum. You can check out the Bezier plugin: https://greensock.com/docs/Plugins/BezierPlugin The MorphSVG plugin has a .pathDataToBezier() method. https://greensock.com/docs/Plugins/MorphSVGPlugin You may also be able to make it work with a textPath animation. I wrote about that here: Demo from that thread: https://codepen.io/PointC/pen/vRzmeO Hopefully that points you in the right direction. Happy tweening.
  38. 6 points
    Hi @conceptstoryde, Welcome to the GSAP Forums! Thats a pretty broad spectrum question and a bit much to ask. ? Thats better. ;--) Here are some threads that may assist you with gathering data-attributes for use with GSAP. • https://greensock.com/forums/topic/19421-gsap-valuesprops-from-data-attribute/ • https://greensock.com/forums/topic/11723-using-inline-data-values-to-tween/ • https://greensock.com/forums/topic/12143-data-attribute-to-timeline-variable-name-need-advice-from-javascript-wizards/ I assume that is what you are asking? Please specify further if I am mistaken. If you're having trouble or need further help please create a codepen as shown here. Then someone can try to assist you with issues you might be having as shown in your reduced codepen test case. Assisting with building entire sites is a bit much to ask of forum members, though there are plenty of people willing to help when you get stuck on something specific pertaining to GSAP. :--) Again welcome to the forums, you are gonna love GSAP.
  39. 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.
  40. 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!
  41. 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:
  42. 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
  43. 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.
  44. 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.
  45. 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
  46. 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
  47. 6 points
    Hello @Adam Wright and Welcome to the GreenSock Forum! Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from() So the from() method has 3 parameters.. specifically the target parameter: TweenMax.from( target, duration, vars ) The target parameter target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object. Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution. The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases The Vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); }); The jQuery way: // wait until DOM is ready $(document).ready(function() { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded $(window).bind("load", function() { // GSAP custom code goes here }); }); Happy Tweening
  48. 6 points
    You don't need jQuery for gsap and your script isn't using it as presented. jQuery is required for some bootstrap elements however - see link, if you're using it with gsap it would have to be loaded before gsap. https://www.w3schools.com/bootstrap/bootstrap_get_started.asp To wait for assets to load before starting animation you can wrap them in a load event. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload Some info on jQuery document ready and jquery load: https://coderwall.com/p/_jothq/jquery-when-to-use-document-ready-and-when-window-load I don't use bootstrap studio but it look like the interface allows you to import and set the order of your js scripts: https://bootstrapstudio.io/tutorials/changing-file-include-order-js
  49. 6 points
    Hi @Anand Makhija, This could be a way ... https://codepen.io/mikeK/pen/GyPYPZ Happy tweening ... Mikel
  50. 6 points
    Fantastic, that did it! I can't begin to thank you enough with helping me through this process. I'll be updating the following Codepen so that anyone who should stumble across this can see how it all came together. Many thanks!
×