Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      3,491

    • Content Count

      3,845


  2. OSUblake

    OSUblake

    Moderators


    • Points

      3,313

    • Content Count

      5,699


  3. GreenSock

    GreenSock

    Administrators


    • Points

      2,429

    • Content Count

      14,817


  4. PointC

    PointC

    Moderators


    • Points

      1,845

    • Content Count

      3,812



Popular Content

Showing content with the highest reputation since 07/10/2019 in all areas

  1. 13 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. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. - 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. 13 points
    Are you familiar with CodePen Challenges? In June 2020, GreenSock got to host it! We decided that it'd be fun to have a competition and give away 3 "Shockingly Green" Club GreenSock memberships each week! What is a CodePen Challenge? CodePen is a site where you can create and share small frontend web projects that you've made. You can also start with another person's creation and then modify it to become your own creation (this is called forking). Every month, CodePen hosts 4 weekly challenges with different themes. They host these challenges to help you improve your frontend skills, express yourself, and have some fun! How did this competition work? Every Monday this month, check the CodePen Challenges page for the new theme (you can sign up there for notifications too). Then make something based on that theme! It could be anything. Each week we will provide some different ideas to get you started, but you can create anything so long as it fits the challenge prompt that week. To submit entries to the competition, people tagged @GreenSock on Twitter along with a link to your pen. At the end of the each week, our panel of judges went through and pick their favorite pens that were created that week. The creators of the top 3 pens each week received a one-year "Shockingly Green" Club GreenSock membership on us! Who were the judges? Meet our lovely judges for the GSAP CodePen Challenge Competition (you should follow them!): Aaron Iker Adam Kuhn Annie Liew Cassie Evans Chris Gannon Craig Roblewsky Jhey Tompkins Lisi Linhart Louis Hoebregts Lynn Fisher Olivia Ng Pete Barr Shaun Gorneau Steve Gardner Tom Miller Una Kravets What's this week's challenge? Unfortunately the CodePen Challenge competition is over. But you're free to follow the same challenge prompts to inspire you to create something! We'd still love to see it. You can view all of the challenge prompts on CodePen. The winners Week 1: Sequencing Congratulations to our week one (sequencing) winners: Benoît Wimart, Sicontis, and Cristobal Garcia! Be sure to check out the rest of the submissions. modulofont Sequencing (Mom’s Diner) .cCmsCategoryFeaturedEntry .cBlackContent a { text-decoration: none; } html[dir="ltr"] .ipsGrid_span4:nth-child( 3n+1 ) { margin-left: 2.127659574468085%; } Taika cruising through La Gran Sabana Week 2: Bubbling Congratulations to our week two (bubbling) winners: Louise Flanagan, Oscar Salazar, and Wendy Kong! We had to bring in an extra judge to break ties because the voting was so close so be sure to view all of the submissions as well. Bubbly Bath Bubbles Bunny Breathing Exercise Week 3: Sliding Congratulations to our week three (sliding) winners: Oscar Salazar, Wendy Kong (both are winners two weeks in a row! Very impressive.), and ycw! You can view all of the submissions here. Slash GSAP Penguin Blue Room Week 4: Scrolling Congratulations to our week four (scrolling) winners: supamike, Ismael Martínez, and Shunya! View all of the submissions here. 3D Banners Personal Page Underwater Scrolling Animation Thanks so much to all who participated. We couldn't have ran this competition without you!
  3. 10 points
    Hey fellow GreenSockers A little over five years ago, I took a chance and posted a question on the GreenSock forum. Nobody called me dumb and that was a HUGE relief! So much so that I wrote an entire GS post about it four years ago. It was a turning point for me and my JavaScript journey. Today, I’m taking another big leap in my life and launching a web animation tutorial site. My reasons for doing so are both personal and professional. This thread is a sequel to my One Year post listed above. Call it My Five Year Journey. Personal reasons My life has been full of twists, turns and milestone events over the past few years. I turned the big 50 and ask myself every day how that’s even possible. The memories of getting my first computer (TRS-80) and learning BASIC in the early 80s are so vivid that they feel like it was only a few years ago. Wasn’t it just yesterday I was programming the PET, VIC-20 and Commodore 64 in high school? Time does fly and I’m not getting any younger. I also celebrated my 30th wedding anniversary. That event itself isn’t a reason to start a new website, but the longer I’m married, the more I realize how lucky I am to have a partner and cheerleader with me when I try new things. She has been a tremendous support in this new endeavor. I wonder how I ever talked her into marrying me all those years ago and how she has put up with me for 30+ years. The other recent personal event that has shaped my decision is the one that is affecting us all right now. Seeing the effect of COVID-19 on the world and how it has robbed too many people of their lives and livelihoods has reminded me that time is precious, and you never know what’s around the corner. As they say, seize the day. Professional reasons After taking the leap and posting that first question on the forum, I was hooked on the GreenSock community. I’ve tried to help as many people as I could in my free time. I love seeing someone have that ‘ah-ha’ moment. This new site is an extension of that desire to help and teach. This will be a difficult challenge. It would be far easier to not do this. As a lifelong introvert, I’m far more comfortable in my dark office typing away on the keyboard so this definitely pushes me out of my comfort zone. It will also be a time management challenge to keep posting new content while taking care of clients and still helping on the forum. I’ll do my best. My final professional reason is that this just seems like the universe is pushing me in this direction. I loved computers and programming in my youth, but my career turned to my other loves of video production and photography. Throughout the last decade there have been many forks in the road, and it seems like every decision has led me here. My life has now come full circle. Fear and self-doubt Despite all the personal and professional reasons listed above, there has still been the nagging self-doubt. Will it be any good? Will anyone read it? Hasn’t this already been written? Maybe others don’t have that little voice in the back of their head, but mine starts yelling at me loudly when I try something big. It’s one thing to post an answer in the forum, but quite another to really put yourself out there with a whole new site. After some sleepless nights, I finally found calm from one realization. If I can help even one person with a problem, teach them something new or spark an idea, it will all be worth it. The rest of the fears don’t matter. Life is just too short to be scared or worried. The website’s focus If you know me from the GS forum, you know I love SVGs and making them move with GSAP. The website will, of course, feature a lot of SVGs and GreenSock will power everything. However, my primary focus will be real world projects. I find that I learn best when I’m building an actual project, so I’ll try to keep that as the focus. I’ll have lots of little tips and quick things too, but projects will be the main thing. Frequent visitors to the forum also know I don’t take it all too seriously and joke around a lot. You’ll be happy to know that several of the tutorials feature terrible jokes and puns at no extra charge. Thanks to the GS gang I’ve said it many times before and I’ll say it again. Thank you to Jack( @GreenSock) for creating the tools, but more importantly, thanks for fostering a terrific online community. Had I not discovered GSAP and started hanging around here, I would not know much about JavaScript and the new site would not exist. Special shout-out to @Carl too. He’s already in the trenches with training and tutorials and has encouraged me the whole way as I was getting this thing launched. All my fellow mods — thanks for the help and comradery over the years. You are all awesome! motiontricks.com Finally, without further ado, I introduce you to motiontricks.com My best to all of you. Thanks for reading. Now, let’s get those pixels movin’! 🚀 -Craig (PointC)
  4. 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.
  5. 8 points
    @ddi-web-team @Sygol @Yannis Yannakopoulos I whipped together a helper function that should make this quite easy. Check it out in this CodePen: https://codepen.io/GreenSock/pen/823312ec3785be7b25315ec2efd517d8?editors=0010 We may end up adding it as a static method on ScrollTrigger if there's enough interest. What do you think?
  6. 8 points
    I’ve talked about this in other threads, but I think it’s worth making a standalone tip for it so here we go. There are three things that will eliminate coordinate surprises and weird transforms with your SVG exports. A background rectangle A background rectangle A background rectangle Yes, it’s that important. Take this simple 600 x 200 SVG. Nothing but a circle, rectangle and a blobby path. Here’s how it looks in Adobe Illustrator. You’ll see that I also have a background layer with a 600 x 200 white rectangle in it. Exporting that SVG produces this result: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"> <g id="Background"> <rect width="600" height="200" fill="#fff" /> </g> <g id="Children"> <circle cx="100" cy="100" r="75" fill="#75131a" /> <rect x="225" y="25" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" fill="#0071bc" /> </g> </svg> Exactly as I’d like. A 600 x 200 viewBox and everything is positioned where I expected it. Now, what if I didn’t use the background rectangle? Here’s the export result after removing it: <svg xmlns="http://www.w3.org/2000/svg" width="554.65" height="178" viewBox="0 0 554.65 178"> <circle cx="75" cy="88" r="75" fill="#75131a" /> <rect x="200" y="13" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" transform="translate(-25 -12)" fill="#0071bc" /> </svg> You can see the viewBox has now changed to 554.65 x 178 instead of my artboard size of 600 x 200. The circle and the rectangle no longer have the coordinates I expected, and the blobby path has some weird transform applied to it. This is only three simple elements and it’s a bit difficult to animate with precision. Now think about complex SVGs with multiple paths and how this could cause problems with your animations. Bottom line: use a background rectangle the same size as your SVG, export your code and then delete the rectangle if you don’t need it. Hopefully this info helps with your SVG projects. Happy tweening.
  7. 8 points
    Hi @Saurabh Nandwana That's quite an ambitious task! Performant vector rendering is a problem that people have been working on for years. Have you checked out bodymovin/lottie? It's a vector player, but it's not a perfect solution, nor is it always performant. https://github.com/airbnb/lottie-web https://codepen.io/collection/nVYWZR There's even a nice web component for it so you can use it just like a <video> element. https://codepen.io/fernandocomet/pen/JLrbYB Having too many canvas layers can slow stuff down. I remember the developer of bodymovin/lottie saying that it uses a dirty rectangle algorithm to limit redrawing to parts of the screen that have changed instead of the entire scene. In general, I would say Canvas2D is probably the fastest way to render vector graphics on the web, but it does have limits. Uncheck the Use Bitmap checkbox, and you should see the performance drop as it switches to vector rendering. https://codepen.io/osublake/pen/a7868b452dfb5eebad6ee9ae24c2bfc3 Morphing works well for some stuff, but it's probably not the best tool for a Simpsons cartoon as its hard to control the movement like you can with joints and bones. WebGL is still a nice option for 2d, but it won't automatically fallback to canvas as WebGL uses a completely different API. However, WebGL support is very good. I'm pretty sure it will fallback to WebGL 1, but PixiJS was never really designed to really handle complex vector graphics. It's optimized for raster graphics. For SVG, it converts them into bitmaps, so they are static. To change a path, you would need to modify the source SVG and then get Pixi to reload it, which is a slow process. For stuff like that, it's usually faster use a Canvas2D as a texture as it's much faster to update.
  8. 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.
  9. 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
  10. 7 points
    By encourage I think he meant "incessantly bugged me for 2 years" Now, that Craig got his blog up, I'll move on to @OSUblake The world needs a GSAP + Pixi hero. Great job, Craig. I'm truly impressed. I can't wait to finish reading all of it. I'm sure motiontricks.com will be a tremendous resource for anyone learning and mastering GSAP. I'll whole-heartedly recommend it. When's the next post going live?
  11. 7 points
    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos
  12. 7 points
    Hi @Juc1, The way I usually handle something like this is by cloning the first slide, appending it to the end, and allowing it to become the final tween before restarting the timeline. This gives a nice, seamless affect of an infinite stack. In my case, I'm using jQuery clone and appendTo to take care of this (because it makes it dead simple). The other thing is, I reordered the SVG <g> elements to be one, two, three (rather than three, two, one) to take advantage of the default stacking order. https://codepen.io/sgorneau/pen/gOPOeeY?editors=0010 Happy tweening! Shaun Edit: Also note that since you are using the same properties and values on each tween ... you can stuff those into the timeline's defaults and not have to worry about assigning them to the individual tween's
  13. 7 points
    First, an animation/timeline/tween is not a state. Use a ref instead. A ref is just like using this in a class component. When you set state in hooks, you lose everything that wasn't saved in a ref/state. https://codesandbox.io/s/gsap-and-usestate-4prg6?file=/src/child1.js I think that is really confusing, which is why I prefer using classes for gsap animations.
  14. 7 points
    You can skew elements based on the scroll velocity using the InertiaPlugin or ScrollTrigger: With the InertiaPlugin With ScrollTrigger
  15. 7 points
    Hey @agilepixel and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you. GreenSock is actually working on our own scroll plugin but it hasn't been released yet. Until we have the scroll plugin, to animate thing on scroll you have to use either the scroll position or the intersection observer API. Here's a basic demo using the scroll position: https://codepen.io/GreenSock/pen/BaNPoEK And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
  16. 7 points
    Hey @Robert May, this example could be helpful - its still gsap 2.0 https://codepen.io/mikeK/pen/ZwmdYv Happy tweening ... Mikel
  17. 7 points
    Hey, A prehistoric animation, no-scroll https://codepen.io/mikeK/pen/BaNPLNL Stay healthy ... Mikel
  18. 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
  19. 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. 😉
  20. 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
  21. 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.
  22. 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 );
  23. 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
  24. 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); }
  25. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  26. 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).
  27. 6 points
    First, gsap has built in random support. https://greensock.com/docs/v3/GSAP/UtilityMethods/random() Use delayedCall instead of setTimeout. setTimeout is not synced with gsap. https://greensock.com/docs/v3/GSAP/gsap.delayedCall() Subtracting and adding 0 makes no sense. var x = Math.random() * (maxOffsetX - 0) + 0; // Better var x = Math.random() * maxOffsetX; .toFixed() creates a string. Bad for math. var sTo = (Math.random() * (scaleTo - 1.00) + 1.00).toFixed(2); Easy random sign. function randomSign() { return Math.random() < 0.5 ? 1 : -1; } ... gsap.to($el, { scale: sTo, x: x * randomSign(), y: y * randomSign(), duration: animTime, ease: "power1.inOut", onComplete: start }); I don't know if this fixes your issues, but it's a start. You should also wait for the image to load before storing its width and height. https://codepen.io/osublake/pen/17cbaea5c2ba927d860d74bf6540a042
  28. 6 points
    Hey isengart and welcome to the GreenSock forums and to the world of GSAP! We think you're going to love it. I think I would approach this situation differently. It's much easier to conceptually move an element horizontally and vertically than it is to move it diagonally (though you can move it diagonally if you try hard enough). As such, I recommend that you actually create your stars as horizontal or vertical lines and use rotation in JS to get the rotation that you desire. For example, here's a basic way to do it using an HTML element: https://codepen.io/GreenSock/pen/jOWOrqq?editors=0010 Some other notes: You don't need jQuery to select elements, you can just pass in the selector string and GSAP will select the element(s) for you. In GSAP 3 it's best to put the duration in the vars parameter. You can use xPercent and yPercent if you want to animate relative to the size of the element. You don't need quotes around numerical values unless you need to add a unit. You can used the condensed form for eases that are new in GSAP 3. For example "power3.in". I hope that helps! Let us know what other questions you have.
  29. 6 points
    I'm so sorry about that - it was just a typo in the docs. It's "className", not "class". toggleClass: {targets: ".c, .a", className: "active"}
  30. 6 points
    Try this for now. I updated everything to v3 syntax. One problem is that those random movement tweens are recursive, so we need to kill them. https://codepen.io/osublake/pen/66b5031f646ca23c565fb693de35f132 @GreenSock I couldn't get killTweensOf to work. Can you take a look at that demo on line ~59. I had to manually kill the tweens.
  31. 6 points
    Hi Bannerguy, Based solely on the information provided, the simplest approach to this would be a single tween using repeat, repeatDelay, and yoyo: https://codepen.io/snorkltv/pen/PoPZWJz?editors=0010 If you need something different please elaborate. If you find yourself struggling with the basics, I think you would really get a ton of value from my courses (see links below).
  32. 6 points
    I am continuing to work with GSAP and learn new and cool things. I recently started playing with the Motion Path Plugin, MotionPathHelper, and drawSVGPlugin. No question this time - just a fun shout out to everyone in this community for GSAP and the help you provide. I will get there eventually.
  33. 6 points
    @chrisgannon did a nice one (as you describe inside a circle). https://codepen.io/chrisgannon/pen/xqwgPq
  34. 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
  35. 6 points
    In fact using an useEffect or the corresponding componentDidMount in class components is the best way to be sure that the DOM elements do exist. Keep in mind though, that using that call inside an useEffect hook, will trigger that code every time the state or props of that component are updated, that's why is better to use an empty array as a second argument in the useEffect hook: useEffect(()=>{ // code in here }, []); // empty array ensures that the code is ran only when the component is mounted Also you don't need the useCallback hook to set the DOM elements. In fact I wouldn't recommend it, plus you're not using the hook correctly. The idea of that hook is to create and update values only when the dependencies in the array are updated. Right now you're passing an empty array. Also the constant you're creating is not being used anywhere in your code: // This constant is never used const el = useCallback(node => { if (!node) return; const myTitle = node.children[0]; const mySubtitle = node.children[1]; const myParagraph = node.children[2]; setState(state => [myTitle, mySubtitle, myParagraph]); }, []); Is better to create a unique variable for the parent node element. This code achieves the same result you're getting now: import React, { useEffect} from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { let parentNode = null; useEffect(() => { console.log(parentNode); gsap.set(parentNode.children, { autoAlpha: 0 }); const tl = new gsap.timeline(); tl.to(parentNode.children[0], { autoAlpha: 1, duration: 1 }); tl.to(parentNode.children[1], { autoAlpha: 1, duration: 1 }); tl.to(parentNode.children[2], { autoAlpha: 1, duration: 1 }); }, []); return ( <div className="App" ref={el => (parentNode = el)}> <h1>My Title</h1> <h2>My Subtitle</h2> <p>My paragraph</p> </div> ); } Happy Tweening!!!
  36. 6 points
    You're importing gsap twice. Either use the import syntax in every file that uses gsap, or add the script to your angular.json file, but not both. When using the import syntax, you only need to import gsap though. There is no need to import TweenLite/Max, TimelineLite/Max, or any of the eases. import { gsap } from "gsap"; https://greensock.com/docs/v3/Installation Eases can be done with strings. gsap.to(element, { duration: 2.5, ease: "bounce.out", y: -500 }); https://greensock.com/docs/v3/Eases And you most certainly don't need jQuery. import { gsap } from "gsap"; gsap.fromTo(".mobile-screen", { marginLeft: "20vw" }, { duration: 0.3, marginLeft: "100vw" }); 👆 animating margins is slow. It would be much better to animate x. And with angular, you really should be using refs instead selector strings. https://www.techiediaries.com/angular-elementref/
  37. 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.
  38. 6 points
    I've been updating my slider demos to GSAP 3 and noticed a difference in endX and a snap array. In GSAP 2 the endX would always be accurate, but in GSAP 3 I'm getting numbers that aren't in the array. At first I thought it was a rounding error, but depending on how you throw the target, you can get some wildly different numbers. Am I doing something wrong here or has something changed when I was on hiatus? Here are comparisons of 2 and 3. https://codepen.io/PointC/pen/ExjRaJV
  39. 6 points
  40. 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
  41. 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. 😃
  42. 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
  43. 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
  44. 6 points
    Funny. That's the same date in Back to the Future.
  45. 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!!
  46. 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
  47. 6 points
    There are 3 mistakes. in dragEnd, console.log(box) is giving error. There is no such thing as box Remove x:0, y:0 from tween.to I have no idea why, the right box doesnt show border for the second time. But, once you solve 1 & 2, it started working a little. Here is the forked codepen https://codepen.io/kishin-karra/pen/PoYZEKo
  48. 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})
  49. 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.
  50. 6 points
    I have to ask about this. Cont = { val: 0000000000 }; Are you expecting the output to contain all those 0s, kind of like this? 0000000000 0000000001 0000000002 0000000003 ... 1710007692 If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17. See this article for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart But first, I would first store your counter element in a variable so you don't keep searching for it. var counter = document.getElementById("counter"); And then change the onUpdate callback to this. TweenLite.fromTo(Cont, 500, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { counter.innerHTML = (Cont.val + "").padStart(10, "0") }, autoAlpha: 0, delay: 0.1 });
×