Popular Content

Showing most liked content since 03/17/2017 in all areas

  1. 12 points
    Hi GreenSock community, It's been about 4 months that I started participating in forum with intentions to learn while trying to help others and solving their problems. I am mainly writing this to inspire everybody to try participate in the forum without doubting yourself and help & learn. Ohk so @PointC has already written a similar post about his experience of participation in forum for a year so I will try not copy him plus I can't really be as creative as him. First, time to thank everyone, Starting with Mr. GreenSock himself, Jack thanks a lot for putting all the efforts and creating this awesome library. I can't really imagine how you have managed to write and maintain thousands of lines of code for years. I know you take a lot of pride in your code and sometimes people including me call something a bug even though it is their own mistake, so nowadays I give it a lot of thought before calling anything a bug. I would love to look upto to you but I don't want to wake up in the middle of sleep with headaches. Happened to me twice because my brain tried to solve unsolvable problems in sleep. I don't know how you manage to sleep, because I will never sleep with the thought that thousands and thousands(millions maybe?) of people are using my code with such inconsistent environment of browsers. Thank you so much. Interestingly you gave me that final like. NOTE: Hey @PointC not trying to copy you but it is getting on similar track. GreenSock Ambassador Carl, You had said in your first message I might get addicted to the forum and it really happened. Your story of how you came to be GreenSock ambassador is really great. Your last post on snorkle tv is inspiring as well, though I never continued to post any more video tutorials. So I might just take a short break and start doing that. All conversations with you has been really pleasing. Thanks for always being nice and encouraging to me. Again, thanks Jack and Carl, for always appreciating and ignoring my wrong answers . Your messages mean a lot to me and I often re-read them. Mr Creative Craig AKA PointC, I will start by saying, I was really excited to start participating in the forum along with you and Jonathan. So it was really disappointing to see both of you less frequently, or was it because of me trying to answer everything? It is always fun to have you on the forum, I have learned a lot from your demos and I would really love to get 2 cents of your creativity. I have even posted many answers just by posting your demos, so thanks for all the cool demos, tips and tricks. Mr Mustache Jonathan, Hey Jonathan, would love to see you more often on the forum. When I was new, I never read your CSS related posts but they are most valuable. I remember I tried all forums for some CSS related issue but only your knowledge helped me fix the issue. That's really amazing. Thanks for all the work you do in your CSS world. Also, what's with the mustache? Do you have same mustache in real life? @Dipscom I am still waiting for your big explosion demo. You always keep things fun and happy with your own style, it is fun to read. I mentioned writing clean code, there was one thread with really ugly code from OP. You responded to it by cleaning up the code that looked neat, that actually inspired me to start writing cleaner code. Thanks a lot. I remember you saying that you don't even get to see leaderboard because of me. But remember recent thread about stagger tweens? I only answered that because I had read your blog post about stagger tween returning an array, those could have been your likes. Well, I hope you find time to post that big explosion before my Comma Club post. Also, after seeing your brave act of walking alone into darkeness, I will request @GreenSock and @Carl to give you 'Brave Warrior' badge. Thanks for keeping it fun, very few can do it. Mikel @mikel Thanks for always liking my posts it is fun to have you here, some of your cool holiday related demos and puzzling 2 lines are fun to see. @Shaun Gorneau You were like ninja of this forum, I would rarely see you active but you will suddenly leave couple but precise answers. Hope to see you continue your ninja activities. You don't have to be a 'Guru' to participate When I started participating in forum I hardly knew much about GreenSock and many finer details of it. I have often asked questions that can be answered just by visiting the Docs, but I still decided to start participating. By trying to help others you come across problems you might never face but it prepares you for the future scenarios. I know how some physics based canvas animations are done but I would have never touched SVG for next 2 years, by participating I learned things that I would have never tried on my own. It's not just SVG though, many weird situations involving timelines, complex animations, variety of GSAP plugins, some rare edge cases that teach you a lot more about how GSAP works. I also learned how to write better code, I used to write really ugly code but seeing how others write, I have improved a lot. Not just better code, I learned many new ways to write usual JavaScript and learned to name my variables better. I learned how to write something with fewer lines or a lot smarter approaches that reduced my code from 20 lines to 2-3 lines. Best part about participating in forum is you either get to confirm that what you are doing is right or someone will point you to better approaches. So if you are new, still learning then give it a try and it will only benefit you. You don't have to go all crazy and spend a lot of time, an hour a day is enough. You just take few steps out of your comfort zone and with time you guys will learn a lot. Some of the new members/participants I would like to mention, @Visual-Q and @AcccentYou guys are doing great with your recent participation, hope you continue to do so. @lenncoWhy stopped suddenly? Was looking forward to you highjacking every thread. Hope to see you back. Hey @Noturnoo I think it's time you start helping others, I believe you can do it. @smallio, @Woohoo and @Scarybelles I read your recent posts, like everybody suggested if you visit forums regularly and try solving problems of others, it will always introduce you to something new. So I hope you guys participate and continue to do so, and anybody else might be inspired by it. That's all. Thank you guys. Hundred Times Smarter Guy Couple of years ago I had posted a question and I got really great answer and from that moment I was inspired to learn something from new. I messaged Blake and told him that I would love to learn from him, I tried to participate in forum so I won't miss any of his posts but I stopped with animations altogether. Then suddenly last year I started posting questions and like always Blake answered my question generously and even wrote a demo from scratch to help me. He helped me inspire to keep learning, help others and keep doing it. If I ever helped you it's all because of Blake. If it wasn't his participation of the forum I don't know if I would have been as excited about animation as I am now. Hey Blake, Thanks for everything you have done for everyone here and helped me always. You have helped me improve on so many levels, from writing clean code to writing smart code. Thanks for making me quit jQuery, I would have never quit using it. The best moment for me on forum is whenever I would answer questions in forum along with you. Thanks for always correcting my mistakes, and introducing me to new ways to do things. I don't know how you manage to do everything with all the details. It is amazing. I have learned so much in last few months but you still seem hundred times smarter to me. Hope you continue inspiring more people. You are amazing and a great person. I will always be grateful to you, Thank you. Thank you all, Sahil
  2. 9 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.
  3. 9 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.
  4. 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.
  5. 8 points
    @Sahil Thanks for the mention! I fell in love with GSAP and this community nearly immediately as well (I think it was back in early 2013!!!)! I try to get in here as much as I can, and I hope it can be a lot more in the coming months! I've gotten bogged down in projects too often lately ... whenever I come up for air, I jump back into the GSAP forums to remind myself why I love development so much; because it CAN be ridiculously fun! Thanks to GSAP, Jack, Carl and the community!!
  6. 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'});
  7. 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 });
  8. 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
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 8 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!
  14. 7 points
    Alright, @Sahil, your post made my day. It's difficult to express how rewarding it is to hear a story like yours (and similarly @PointC's), where you take a chance and start participating in the forums and it leads to such growth, largely because of the generosity and intelligence of the moderators here, as well as your own persistence and willingness to help others. I think that last part is the real key. I remember the days when it was just me trying to answer every question (luckily there were a lot fewer). Yikes! The sense of community and kindness here is so encouraging to me. Every moderator (including you) was carefully selected because they demonstrated not only a solid understanding of the tools, but [more importantly] their positive attitudes. It's often difficult when users don't include any demo or they're rude or post 1,000+ lines of code and expect you to find all the problems. Most communities have snarky, arrogant participants who are quick to make others feel stupid for posting questions, but there's none of that here. It's a "come as you are, we're all learning...it's okay, we'll do our best to help each other" attitude. LOVE THAT! Anyway, thanks for sharing a piece of your story, Sahil. Keep up the great work my friend.
  15. 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.
  16. 7 points
    Just to chime in @Visual-Q, some scroll events, depending on how they were trigered, cannot be cancelled. It might be outside GSAP's reach. @GreenSock himself will be able to confirm that. In the meantime, this article has some useful information about how browsers handle scroll. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97
  17. 7 points
    It's a security issue when inserting JavaScript like that. Don't know how jQuery does it, but if it uses innerHTML, it's not supposed to execute. Or it could be a closing script tag issue. https://stackoverflow.com/questions/610995/cant-append-script-element https://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write/
  18. 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.
  19. 7 points
    Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn
  20. 7 points
    You, my friend, will need to step into the wonderful and mesmerising world of MATHS. Have a look at this channel by Keith Peters, it will teach you tons about calculating physics-like movement. https://www.youtube.com/user/codingmath
  21. 7 points
    I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach. (You can also convert it to a path before exporting from your vector software if you like.) I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you. Happy tweening.
  22. 7 points
    Hi and welcome to the GreenSock forums. The way I normally attack this situation is using React's lifecycle methods, most specific the componentDidMount method. With that you know for sure that all the child have been rendered before making the animation. This is a sample that uses a code similar to that. Unfortunately I don't have any samples around with the specific behavior you need but hopefully you'll get the gist of it: Basically when creating each child (which in this case come as a hardcoded array, but getting the data via props shouldn't be much different) you give it a unique ref attribute to each which then you can use to loop and create the timeline or the stagger instance if you like (to create a stagger instance just reach to the array in the props and that should do it), then create the timeline and finally play it. I'll try to whip something during the afternoon that matches what you need. This is another sample but it uses a different approach, since it uses Transition Group since the elements are mounted and unmounted depending on the user interaction. It doesn't use a timeline or stagger, just a simple delay. This relies in the fact that the code is executed very fast (for larger apps you could consider server side rendering or perhaps another approach, once all the elements are rendered, perhaps pagination to render a small chunk of elements) and that the components are rendered in the sequence they exist in the app's data (again hardcoded in an array). But considering the fact that in a real app React will render all those child components at once so we can rely on that delay to create the stagger effect. Pay no attention to the code that's commented out, that's there in case someone needs to use CSS Transitions. The only catch is that the duration const used in the <Transition> component has to be the same that the one used in the GSAP instance, otherwise the component mount/unmount will be out of sync with the animation. https://codesandbox.io/s/7Lp1Q8WBA Hope this helps. Happy Tweening!!!
  23. 7 points
    Hello dear friends, Kind regards Mikel
  24. 7 points
    I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: Is that what you're after?
  25. 7 points
  26. 7 points
    Hi @ericshew The most noticeable problem is line 19. //Switch this tl.reversed() ? tl.play() : tl.reversed(); //to this tl.reversed() ? tl.play() : tl.reverse(); That should get everything working for you. It can certainly work with playing and reversing the timelines like that, but you'll see some harsh morph jumps when hovering on/off quickly between <li> tags. You could get some smoother morphs with rapid hovering like this: Just my two cents worth. Hopefully that helps. Happy tweening.
  27. 7 points
    Hi @DD77 pls check these out : and the second one: are these what you looking for?
  28. 7 points
    Hi @kaliel Since you're not animating anything that would require an element to be redrawn, converting this over to PixiJS would be pretty easy. You're SVG could be used like a sprite sheet, which is good. 1 graphic is much better than 400+ graphics. I can show how to do that later, but you'll be able to animate 10,000 objects without skipping a beat. Press down to add more bees. That's running without using a particle container, which would make it even faster.
  29. 7 points
    Hey Blake, About 30 seconds into your previous post (exaggerated demos of waapi vs gsap) I had pulled out the Ban Hammer and was giving it a nice polish;) Great job debunking the myths of the gurus! I can't help but laugh and cry a little when I hear people say "you should only animate transforms and opacity". Normal person: "I'd like to animate the width of this.." Guru: NOOOOO, STOP! It will cause a repaint! Your site could crash, especially on mobile devices! Normal person: "I just ran an augmented reality demo on my phone where a horde of zombies exploded in front of me" Guru: You don't understand, laying out a grid with different sized fonts is EXTREMELY processor intensive.
  30. 7 points
    I don't think so. About the only thing a WAAPI timeline has in common with a GSAP timeline is the name. All I can say is that you should give it a test drive. If you like creating CSS animations keyframes, and are familiar with CSS animation terminology and properties, you'll like WAAPI. Now don't get me wrong, I would actually like to see @GreenSock add something like keyframes to GSAP, I've just never asked for it. It would be really helpful for situations that otherwise might require you tween the progress of a timeline with another animation, but I certainly wouldn't want to use keyframes as the basis for all my animations. Weren't you the one that brought up cargo cult programming? As WAAPI becomes more widespread, it's going to be like 2013 all over again. But instead of people saying that CSS animations are better than JS animations, the mantra will be that CSS and WAAPI animations are better than JS animations. Why? Because that's what some performance gurus over at Google said, and they know what they're talking about. And some of the stuff I've read on Twitter and Medium is also pretty convincing. I mean, just look at this comparison. This is what happens when the browser is busy, which apparently happens all the time. The JS animation on the left is all jank, while the WAAPI animation on the right doesn't skip a beat. Amazing! Don't believe me? See for yourself. I spent a lot of time coming up with an algorithm that accurately simulates how a normal site behaves. That demo says all that needs to said. WAAPI is clearly better. No further testing is required. Oh wait... a challenger appears. It's called "Something other than transforms or alpha". Oh how the tables have turned! Turns out that WAAPI is indeed susceptible to jank. Not only that, but the jank can be magnified if the animation gets out of sync, looking like a video game with really bad collision detection, glitching through walls and stuff. So locking the browser up to show how jank affects JavaScript animations is just stupid, and can actually disprove what you're were trying to prove. Besides, if your site really has that much jank, then one or more of the following must be true. You're not a good developer or just starting out. You're scroll jacking the interface. See previous point. You're creating a WordPress site and just discovered themes and plugins. See first point. You're viewing a demo showing how JavaScript animations are affected by jank. You're using IE6 with 40 different custom search bars while running BonziBuddy. So all those demos and articles that talk about the performance benefit of WAAPI are not entirely true. WAAPI only performs better when it's being demonstrated using cherry picked conditions. There are like several hundred different CSS properties that can be animated. To say that you should only animate transforms, alpha, and a couple filters is crazy! That's sounds more like a coding challenge. And what about SVG? Should we just ignore that all together? I think not.
  31. 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/
  32. 7 points
  33. 7 points
    Thanks for the illustrations and demo. I had to relearn a technique I illustrated in Flash tutorial 6 years ago http://www.snorkl.tv/2011/08/tile-transitions-for-grid-building-and-masking/ (select diagonal top and click toggle) If you add each box's row number to column number you will get values the increase across the grid in a diagonal. You can use these numbers to generate the offset of each animation in a timeline. In the demo below I put the sum of column and row in each grid. Since you don't want a delay of 36 or 49 seconds we multiply that by 0.03 to shrink it down. Try using (c*r) for a nice curve instead of diagonal
  34. 7 points
    Hi all, one mask - two rects - one timeline - the help of use that simple it can be
  35. 7 points
    Believe it or not, the trick here is the easing! I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here What you'd want to focus on is the ease: Elastic.easeInOut.config(8, 0) For your case, "8" might be too much ... so modify that to get the right feel for your project.
  36. 7 points
    Hi @Nineve Use scale instead of zoom. Problem solved. Serializing and deserializing the position and rotation of draggables should be real easy. In that demo, you can loop through the array of draggables like this. draggables.forEach(function(draggable, index) { var target = draggable.target; var transform = target._gsTransform; console.log("Rotation", transform.rotation); console.log("X", transform.x); console.log("Y", transform.y); });
  37. 7 points
    A couple quick things ... you have a lot of variable names/selectors going on ... learnmore $learnMore '#learnMore' First and foremost, your first line needs to be capital `M` in the id `learnMore` because that is how the ID is assigned in the html, and you don't use the # when get an element by id. var learnmore = document.getElementById("learnMore") Then ... use your variable 'learnmore' ... not other misspellings; e.g. $learnMore. Technically you can use the '#learnMore' selector as GSAP has a built selector engine. But, for consistency, I would use the variable that is already created. Lastly, use event listeners to call the functions wrapping each Tween
  38. 7 points
    Hello @timdtand welcome to the GreenSock forum! This is happening due to not returning your timeline in your timelineone function. GSAP add() method expects a timeline being returned when you have a function. So your missing this inside timelineone() fucntion return tl; And all together function timelineone(){ var tl = new TimelineMax(); tl.from(".tekst1",1,{x:250}) .to(".tekst1",1,{scale:0.1,autoAlpha:0}); return tl; // your missing this line } And now you can see your animation run Checkout this CSS Tricks Article by the Mighty @Carl on how to write smarter animation code: https://css-tricks.com/writing-smarter-animation-code/ And this: Happy Tweening!
  39. 7 points
    onCompleteAll is different than onComplete callback. Following is syntax for it.
  40. 7 points
    Hi @RuizBox Welcome to the forum and thank you for joining Club GreenSock. @Sahil is exactly right, drawSVG only works with strokes. The problem you'll encounter with your design is the gradients in the stroke of your logo. There are ways around this and we've had some discussions about animating gradients in strokes, but I think there's a much easier approach for you. If it were me, I'd add a mask over the top of the logo and use drawSVG to animate the mask and reveal the logo. Like this: If you have additional questions, a CodePen demo is the best way to get answers as we can easily edit your code to find a solution for you. Here's some info about that. Hopefully this helps with your project. Happy tweening and welcome aboard.
  41. 7 points
    Hello! I've been meaning to drop a pen here but it took me forever to find some spare time and then another eternity to conceptualize the bits needed for the animation.
  42. 7 points
    I guess my question would be "why?". GSAP is great at manipulating element properties over time and managing those timelines. The pen above illustrates something a bit outside of that scope. While I'm sure something could be whipped up with GSAP ... why when the solution in the pen handles it perfectly?
  43. 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.
  44. 7 points
    Hi @alan0buchanan It really depends on where you look. On this forum, and places like CodePen, you're not gong to find a lot of people using ES6. Look around a place like HTML5 Game Devs, and it's a completely different story. I think most people start using ES6 because of some library/framework they are using. If a person is using React, there's a good chance they are also using ES6 because it's used in all the examples. But I've noticed that a lot of people still live in a jQuery world. The only code they are exposed to is what they see in jQuery's documentation and 10 year old answers on Stackoverflow. So I would have to say that the reason you don't see a lot of ES6 is just plain ignorance. A lot of people have never heard of it, or are misinformed. You'd be surprised by how many times people have asked me how to convert Babel into JavaScript. If you want to see more ES6 examples, people need to be informed, so help spread the word. What is ES6? It's the 6th version of JavaScript, and is also known as ECMAScript 2015. ES5 was the previous version, and came out in 2009. Why should I use it? Because it's JavaScript. There's a lot of new features that can help you write code that is cleaner, smaller, and more concise e.g. arrow functions, string templates, destructuring assignment, computed property names, classes. What is Babel? It's a tool to convert modern JavaScript (ES6) into code that can be used in older browsers. What about performance? There are some new features that haven't been optimized by browsers yet or need a polyfill. This will of course change over time, but if something is too slow, don't use that feature. Most of the features are syntactic sugar, so there should be no difference in performance.
  45. 7 points
    If you're using an array with the data you'll use as a reference, then there's no need to use an anonymous function in the ref attribute, just pass the property of the element being used in the map helper: const data = [ {id:1, name: 'box1'}, {id:2, name:'box2'} ] data.map( (item, index) => className={styles.box} key={`box${index}`} ref={item.name}; ); Then reference the element following the same pattern: tl.to(this.refs.box1, 0.5, { backgroundColor:"#F19939" }); Keep in mind that the GSAP instance must be created inside the component's that has the node element. Here's a simple example made in codepen. Is not a lot of code so it should be easy to follow: Happy tweening!!
  46. 7 points
    Hi @madfatter Looks like they're using a SVG with some png graphics for that effect. I'm not sure why they have pngs. I'd probably make the whole thing a SVG. The animation itself is pretty easy. You rotate the entire graphic, but each smaller piece rotates an equal amount in the opposite direction so they stay upright. You could then animate the text opacity at each stop. I made a similar rotation of planets as an answer to another forum question. Maybe it will give you some ideas. If you're just getting started with the JavaScript version of GSAP, I'd recommend: https://greensock.com/jump-start-js https://greensock.com/get-started-js Once you have something started, we'd be happy to assist you with any GSAP related problems or questions. For the best possible answers, please provide a demo with any questions. Here's some info about that: Hopefully this helps. Happy tweening.
  47. 7 points
    Hey @kvnmcwebn! I think you are overcomplicating things here. There's a simple way around it with minimal code. Try changing the following: From this: <div id="head" style=" margin-bottom:-100px; z-index: 9999; top:50; left: 100; "> <h1 style="color: #ffffff;"> Some Text Here<h1> </div> <svg>...</svg> To this: <svg>...</svg> <div id="head" style="top:50px; left: 100px; position:absolute"> <h1 style="color: #ffffff;">Some Text Here<h1> </div> The browser reads and parses the code from top to bottom so, if you want to have something sitting on top of something else, you should always first have the relevant code doing so. There's no need to have z-index involved if you can get the same result by just altering the order of you HTML. And since you are making things responsive, I would also recommend wrapping those two elements in another tag and having its position set as relative. That is because absolutely and fixed positioned elements are always aligned to the first parent element with a position:relative which, might not always produce the desired effects if you do not set one yourself. <div style="position:relative"> <svg>...</svg> <div id="head" style="top:5%; left:10%; position:absolute"> <h1 style="color: #ffffff;">Some Text Here<h1> </div> </div> Note that I have changed the top and left to percentages. And that you forgot to add the unit (px) in your original code. I've also seen that you are trying to tween a boolean value somewhere in your code as you have the following error in the console: 'invalid randomize tween value: true'. You might want to check that out. Other than that, good job, this project of yours is shaping up quite nicely. Happy Tweening!
  48. 7 points
    Hi @kvnmcwebn Have you seen these pens by @chrisgannon ? He's creating those speed lines in a loop with the drawSVG plugin. That plugin is a Club GreenSock bonus, but you can experiment with it on CodePen. Here's some more info about the Club. https://greensock.com/club Hopefully that helps a bit. Happy tweening.
  49. 7 points
    You can usually find whitespace in between words.
  50. 7 points
    Thanks for the demo, very helpful. I think smoothChildTiming:true will help. Docs for smoothChildTiming: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/smoothChildTiming/