Leaderboard


Popular Content

Showing content with the highest reputation since 03/12/2012 in all areas

  1. 15 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. 12 points
    You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate. To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump. This technique will work for every flexbox property. It will actually work for any type of layout that the browser handles, like the new CSS grid. For more information, check out these threads.
  3. 10 points
    Hi dear community! I know you missed new releases with HERO banners. Today I present 3 of them! Please give us feedback if you like them. 1. World Of Tanks — Take Control Animation here 2. World Of Tanks — Video 360° Animation here 3. World Of Warships — Dunkirk Collaboration Animation here Thank you!
  4. 9 points
    GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
  5. 9 points
    There is this big, big tree. Uuuuh, that's high. I always wanted to climb it. Can I? First touch. The peeling is thick, and itchy, but warm and inspiring confidence. I lay my arms around it, starting to rub up. Hmm? Aaha– Okay– That's how– Nice! It's working. That's all I wanted. No need to leave this robust stem. But wait. What's that? There's a branch! And another? I'm curious– The more I climb this tree –body pressed tight onto it– the fear of these little branches slowly fades. I finally, gently step on one. Sometimes they crackle, but never break! My tight grip loosens up; Cheeks stop scratching as I lift my head– Oh boy! So many branches. And look how high I am! Wait what? There's a bird! And anoter one? I start talking to the birds. More birds. I felt like a king just walking the branches. The birds taught me how to jump on them! And soon I'll fly. Soon. I have never experienced anything similar. Such an easy entrance, .. well .. once you accept the word Tween as a thingy describing an animation One can work with GSAP without knowing anything more but .to, .set, and .from. Easy to learn, hard to master. You decide how far you go. When you are part of this special breed of developers/designers, be careful! Because GSAP will suck you in, won't let loose and change the way you see and work the web. That's what I love most. Thank you guys for that. 4 hour research until 1:30am in my freetime, and still burning so much inside that I had to write this. That's how awesome GSAP is.
  6. 8 points
    Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.
  7. 8 points
    Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph
  8. 8 points
    Hi and welcome to the GreenSock forums!! A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need: I made a fork of it and changed a bit to simulate what you need: Hopefully this helps. Happy Tweening!!!
  9. 8 points
    Yep - the animation is usually easy. (especially with GSAP). Most of the work is in asset prep and organization. I did a post over at CodePen about using the pencil to recreate a font for a handwriting effect. It's pretty much the same technique to create a mask except you don't have to be as precise. A mask has to be close and just enough stroke-width to cover the artwork. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 And the pen that goes with it. Happy tweening.
  10. 8 points
    Nice job @Sahil! A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. Advanced demo: Basic (with quasi-documentation in comments): Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome.
  11. 8 points
    Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
  12. 8 points
    Hi alessio, Just use transformOrigin. TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, repeat: -1, repeatDelay:0, yoyo: true, transformOrigin: 'center center'});
  13. 8 points
    That's because when a tween is defined it is rendered immediately to the start position, usually only noticed in the case of 'from tweens'. Because you are using set at the start of timeline, it is behaving same. You can set immediateRender to false on first tween and it will behave as expected. Well and you can use just fromTo tween to same thing. // To tween tl.set(".slide", { opacity: 1, immediateRender: false }); tl.to(".slide", 1, { x: 300, opacity: 0 }); // fromTo tween tl.fromTo(".slide", 1, { opacity: 1, immediateRender: false }, { x: 300, opacity: 0 });
  14. 8 points
    Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel
  15. 8 points
    Hi, For last few days I wanted to start making few video tutorials, I got this idea when I was responding to a thread where somebody wanted to recreate simple carousel effect. This is my first tutorial ever, I plan to make more tutorials mostly based on questions that I answer here. If you feel like you can learn from me, feel free to request any tutorials. I will try to do it depending on the topic and if I can solve it myself. Most of my tutorials will be for those who are just getting started with GSAP. Following is the very first tutorial I made today.
  16. 8 points
    I've made a few games using GSAP: Nevergrind - Single-Player RPG Firmament Wars - Realtime Multiplayer Strategy Game I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC). Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.
  17. 8 points
    Hi @menschies ! Welcome to the forums! Always remember: With Great Powers, Comes Great Responsibilities. Use them wisely, use them to make things a little bit nicer. A few comments: You can use images instead of inlining the whole SVG if you are not changing the inside of it. The solution to your question is about nesting the separating the elements and nesting them based on your needs. I'm super busy these days but I wouldn't mind lending a hand whenever possible for your landing page - within limits. I can't take any responsibility at the moment.
  18. 8 points
    So you can imagine, it's Saturday night and there's another deadline looming on Monday. I'm just about to settle in to what I reckon is about 2 hours of work animating "a magical trail randomly jumping around the screen". I got some ideas so just need to crack on. Before I do I just check the "ease-visualizer" and low and behold I find "rough", which I'd forgotten about. Give it a go and that's kinda what I needed, 20 mins later I have finished the job. This keeps happening Jack you have thought of everything and now I don't have any work to do so can enjoy my Saturday evening. So inconsiderate, I mean there's nothing good on TV!! Realised I bought TweenMax 8 years ago, people thought I was mad spending that much money on a tween engine (for Flash). I've used TweenMax in every project I've worked on since buying it and can't imaging developing without it. So just a quick thanks and I'm off to get a beer.
  19. 7 points
    It's actually a pretty straight forward series of steps to pull of something like this. Depending on other project requirements, things will vary here and there. But the main idea is to establish a number of planes and to make elements on those planes move at differing rates ... typically, the closer the plane to "you", the faster the elements will move by. Here is a quick CodePen explaining the principles of it.
  20. 7 points
    Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS. You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional. Animating properties like height and padding aren't any better. Look at what animating height triggers. https://csstriggers.com/height The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad. 😢 To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP. First - Record the initial state of your element, like its position and dimensions. Last - Move your element into its final state, and record those values. Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation. Play - Play the animation. The browser will go back to being happy again. I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP. It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM. var video = document.querySelector("#video"); Flipper.flip(video, videoModifier, { duration: 0.5, ease: Sine.easeInOut }); function videoModifier() { video.classList.toggle("minimized"); } There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling. Good idea? This is something I might be interested in making into a library if there's demand for it.
  21. 7 points
    What? Aw, that spoiled my day. Come on, @Sahil, we love having you around here! Don't let @PointC intimidate you He's only pretending to be insecure. This place just wouldn't be the same without @PointC, @Sahil, @OSUblake, @Jonathan, @Dipscom, @Carl, @Rodrigo, @mikel, etc. And now we've got some others coming on strong as well, like @Acccent, @Visual-Q, @Shaun Gorneau and more. Love it! Battle for that leader board, guys.
  22. 7 points
    Trick here is to append a clone of the first .slide to the end of #slider. Animate through for the count of the slides minus 1 (i.e. ignore the last slide ... that is to say, less than totalSlides minus 1 because we address them with a 0 index) so that as the last slide gets into position, the slider starts back from zero resulting in a fairly seamless loop.
  23. 7 points
    Hi @dgmldr, Please have a look to your CSS .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); transition-duration: .4s; transition-timing-function: ease-in-out; transition-property: margin,max-height,opacity,top; If you try ... .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); /* transition-duration: .4s; */ /* transition-timing-function: ease-in-out; */ /* transition-property: margin,max-height,opacity,top; */ } you will have a clear responsibility for the job - done by GreenSock. Kind regards Mikel
  24. 7 points
    Hi lennco, Welcome to the forums. Thanks for the demo. Sorry to hear you hit a snag. I was able to confirm (via watching the elements in dev tools) that when you reverse to the beginning, the display value is sometimes staying on inherit and not changing back to display:none. Although it is rare, there is an inconsistency we have to look into further. Putting a set() at the beginning of a timeline (time(0)) is very tricky because a set() is a tween with no duration. Since it has no duration it has to technically complete as soon as it is created on first run. And even though it has no duration (the start time and end times are both 0) it still has to record a start value and end value, or in your case a "before the timeline plays forward values" and a "after the timeline plays forward value". Where things get super tricky is when you consider what happens when the timeline is reversed? When you reverse back to a time of 0 should the value you set() at a time of 0 be rendered (in your case:display:inherit)? Or the value that existed BEFORE the timeline was played be rendered (display:none). Although it could be argued both ways it appeared the more desired behavior was that if you REVERSE back to 0 then the user would want to see things as they were BEFORE the timeline first played. There is logic in the engine that detects this condition and will render the value before the "set" occurred. That is why you see things mostly working correctly when display:none is set after reversing. However, their is also logic in place that accounts for the situation where a timeline has played forward and then the user wants to do pause(0). What should happen then? At a time of 0 you are specifically using a set to set a value so at a time of 0 in this case we render the "end / completed" state of the set. I forked your demo to snap the menu close by using pause(0) instead of reverse(). If you look at dev tools you will see that the inline style stays as display:inherit because at a time of 0 you have a set that dictates that must happen at a time of 0. You can see that behavior here: https://jsfiddle.net/wp7qb448/ All that to say, dealing with 0-duration sets() at the beginning of a timeline is very difficult under the hood. As we look into this further, there is a solution that I believe will give you the desired results. Don't put your set at a time of 0, add it just a little bit into the future like: tl.set(allSub, { display:'inherit' }, 0.0001); This will ensure that when you reverse the playhead always goes backwards beyond this point and will render the beginning state of the set (display:none) See it here: https://jsfiddle.net/zh54cr7u/
  25. 7 points
    In that case, more people will be willing to help you if you provide your code. Just post new question and attach codepen with your current code so we can help you out or guide in right direction.
  • Newsletter

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

    Sign Up