Jump to content

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


  1. OSUblake



    • Points


    • Content Count


  2. GreenSock



    • Points


    • Content Count


  3. ZachSaucier



    • Points


    • Content Count


  4. Pete Barr

    Pete Barr


    • Points


    • Content Count


Popular Content

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

  1. 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!!
  2. 4 points
    I recommend using a regular input element with type="range" for this. You don't even need GSAP, really https://codepen.io/GreenSock/pen/oNNxOxR?editors=0100 If you need more control over the styling (stying default input elements across browsers can require a lot of testing/workarounds) then you could create a dummy version using divs like you did and hide the input. But this approach avoids the issue you describe above. Edit: Looks like Blake beat me by half a second
  3. 4 points
    If you hang around the GreenSock forums and contribute for a while I bet your understanding of how GSAP works will also increase a good bit. We'd love to have you around contributing wherever you can
  4. 3 points
    Hey Enzo, You can modify and add new values to the arrays as you'd like. Are you wondering how to more easily create these points? It might be easier to use an SVG path using our MorphSVG plugin instead. P.S. In the next version of GSAP this sort of thing will be even easier! We're working hard on getting it released ASAP.
  5. 3 points
    Changing the scroll position is messing with Draggable. Probably something @GreenSock will need to check out. But I would just use an input range, and style it vertically. Very quick example. https://codepen.io/osublake/pen/98aea4b0fc9545874b686bb1f23257a8
  6. 3 points
    Hi everyone, not sure if this is a new issue, but it scared me to death today when i noticed my banners won't work in Firefox all of a sudden. I'm using the Google-hosted GSAP since most of my banners run inside Googles ad universe. Now FFs console error message told me that https://s0.2mdn.net/.... is blocked. URLs based on this domain seem to be listed as tracking pages and therefore are blocked by default in FF. Not funny... Switched to the cdnjs links now which still work in FF Just wanted to let you guys know quickly so you can check if your latest projects using any google hosted libs are affected as well. Hope it helps. Cheers and happy tweening!
  7. 3 points
    Hey chenxin and thanks for being a Shockingly Green member. What do you mean "learn animation"? If you mean how to create things like what Chris Gannon or other animators make, reading the source code of GSAP probably won't help very much. For learning how to create animations like that, creating demos and breaking down demos of other animators is probably the best way to learn. GSAP is just specialized JavaScript, so if you're having trouble understanding the source code it'd be good to get a more full understanding of JavaScript itself. There are online courses, articles, videos, and books that can help you there. But again, I find that creating demos and breaking down other peoples' is one of, if not the best, ways of learning. Ultimately it depends on what your end goals are - if you want to be a developer like Jack (@GreenSock) who spends most of his days working on the backend of an animation library like GSAP, then understanding the source code could really help. If you want to be more like Chris Gannon, understanding the source code probably won't help very much.
  8. 2 points
    Chiming in, just because I saw this the other day as well and had the same freakout, but then I realized that it happened when viewing our ads in a private window in Firefox. When viewing in a regular tab, I think it's okay, but it bears a little more research (which I haven't had the time to do yet).
  9. 2 points
    Tough without seeing your code, so I'm making some assumptions here ... why not use addCallback without assigning it a position? https://codepen.io/sgorneau/pen/JjjYzLz?editors=0011
  10. 2 points
    What errors do you see? I don't see any. You are missing the # for circle1. var boulessl =["circle1","#circle2"]; // bad var boulessl =["#circle1","#circle2"]; // good But it's better to use $refs instead. Using selector strings can cause problems if you use the same component more than once. <svg id="svg" @mouseenter="startAnimeMatter" @mouseleave="stopAnimeMatter"> <circle ref="circle1" cx="40" cy="40" r="20"></circle> <circle ref="circle2" cx="100" cy="40" r="20"></circle> </svg> var boulessl =[this.$refs.circle1, this.$refs.circle2]; This adds a function that gets called when you do this.animeMatter.play(). this.animeMatter.add(animeSphere); You need to use parentheses to call the function, which will add the returned timeline to this.animeMatter. this.animeMatter.add(animeSphere());
  11. 2 points
    Great, now put that in a simplified demo. And try not to use .from() so much. You can't exactly do a from with autoAlpha: 0 if autoAlpha is already at 0. From 0 to 0 is 0.
  12. 2 points
    Thanks guys, I found that my problem is that I am using componentDidUpdate, because I need to children to listen for the parent change and that was causing the problem, but I will use React Transition Group. I will add the CopePen next time, sorry about that, thanks a lot!
  13. 2 points
    @GreenSock that’s why i love GSAP forum. This is the best library and community - by far! Thank you all for all the help 🥰😀
  14. 2 points
    Hi, You can use React Transition Group in order to mount the element before the animation starts and then unmount it when the animation is complete: https://stackblitz.com/edit/gsap-react-simple-transition-group https://reactcommunity.org/react-transition-group/transition If you do it manually be sure to destroy the GSAP instance after. As Blake comments the snippet you post doesn't give us the chance to know what could be the issue while a live-editable sample does. That's why I'm assuming that your problem lays elsewhere in your code, when a GSAP instance is still running after you remove the element from the DOM during a re-render. Happy Tweening!!!
  15. 2 points
    Hey kidaww and welcome to the GreenSock forums. I put your code into a CodePen and wasn't able to reproduce the error that you're speaking of. Evidently there's something else going on. https://codepen.io/GreenSock/pen/OJJyRWQ?editors=1000 Can you please create a minimal demo of your issue inside of a CodePen? You can for the pen above if you'd like.
  16. 2 points
    Looks like maybe you just forgot to import Power0 import { TweenLite, Power0 } from "gsap"; But actually, I think you may have meant Linear, since you're referencing easeNone: import { TweenLite, Linear } from "gsap"; TweenLite.to(this.slides, 2, { x: -2500, ease: Linear.easeNone } Don't forget that if you intend to animate CSS-related values, you'll need CSSPlugin. 👍
  17. 2 points
    Hey karpec, thanks for being a Business Green member! We couldn't do what we do without people like you. Let's break down your first approach: .add(t2) .add( // This is ran THIRD - adds the reversed, timeScaled timeline to the master timeline t2.reverse() // This is ran first - reverses the timeline .timeScale(2) // This is ran second - changes the timeScale to make the timeline shorter ) // BUT since reverse() and timeScale() affect the timeline itself, it also affected the // t2 in the previous .add() statement! So adding it twice in a row is practically the same // as just adding it once. For this approach to work, you would need to duplicate the timeline so that there are two instances. That way you can add them to the main timeline one after the other (with the second one being reversed and time scaled). Your second approach is more correct. However, it's still a bit off because of how you're adding the timeline to another (main) timeline. If you remove (or comment out) the main timeline bit, you can see that it works like you'd expect. The reason for this is because you're essentially saying "Main timeline, right once you finish, do more stuff". The main timeline doesn't know what it should do. If you really need to add it to a main timeline (like if you're chaining it with other animations that you didn't show here) I would just use more .to() calls like so: https://codepen.io/GreenSock/pen/dyyogKQ?editors=0010 Happy tweening! P.S. In GSAP 3 which you have private beta access to as a Business Green member there is a feature called "keyframes" that make this sort of sequential .to() on the same element easier You should check it out.
  18. 2 points
    Yes, just replace the canvas code in the draw function with the equivalent graphics code for easel.js. https://www.createjs.com/docs/easeljs/classes/Graphics.html Although, I'm not sure if you can set an "evenodd" fill with easel.js. TweenMax.to("#hippo", 2, { morphSVG:{ shape:"#circle", render:draw } }); function draw(rawPath, target) { var l, segment, j, i; ctx.clearRect(0, 0, vw, vh); ctx.beginPath(); for (j = 0; j < rawPath.length; j++) { segment = rawPath[j]; l = segment.length; ctx.moveTo(segment[0], segment[1]); for (i = 2; i < l; i+=6) { ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]); } if (segment.closed) { ctx.closePath(); } } ctx.fill("evenodd"); }
  19. 2 points
    Because the angle isn't as steep as it is in true isometric, 116.565 degrees vs 120 degrees. That video talks about the difference starting at around 1:30. A quick fork that allows you adjust the values. I'm not sure I'm not seeing that when I set z1 and z2 to the same value. Do you mean that it should be hidden when z is 0? And what browser are you seeing that in? https://codepen.io/osublake/pen/44a86e5c54ec6d6ad0c85cfe50f4fcf2
  20. 2 points
    A lot of the concepts used in that demo are based on this this video.
  21. 2 points
    It's best to make a demo so we can see what's going on. I don't know how you are using your timeline, but you can use .add() to add a function to your timeline. If you are replaying or repeating the same timeline, that may cause problems as I don't know what that plugin does. tl.add(function() { $( "#frame_01" ).mgGlitch({ destroy : false, // set 'true' to stop the plugin glitch: true, // set 'false' to stop glitching scale: true, // set 'false' to stop scaling blend : true, // set 'false' to stop glitch blending blendModeType : 'hue', // select blend mode type glitch1TimeMin : 2, // set min time for glitch 1 elem glitch1TimeMax : 10, // set max time for glitch 1 elem glitch2TimeMin : 1, // set min time for glitch 2 elem glitch2TimeMax : 20, // set max time for glitch 2 elem zIndexStart : 8, // because of absolute position, set z-index base value }); })
  22. 1 point
    Hello piker and welcome to the GreenSock forums. Maybe this article can help you:
  23. 1 point
    Thanks @Rodrigo, that solved my problem! Based on your TweenLite example, I solved it by passing in an empty object as the target
  24. 1 point
    Hey bacondo and welcome to the GreenSock forums. ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members. We really try to keep these forums focused on GSAP-specific questions. However, the ScrollMagic documentation has an example of how to do this, maybe that will help: https://scrollmagic.io/examples/advanced/anchor_link_scrolling.html It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
  25. 1 point
    Thanks Shaun for the reply! Here is my version with slight changes from yours. https://codepen.io/GTStan/pen/zYYrRVd?editors=1111 As you can see in the console, there are two "Callback test". I found the problem, it is is line 14. It is solved with tl.pause(); without the "label1". Thanks, Stanley
  26. 1 point
    Ah this makes a lot of sense and I will check out the article, thanks very much!
  27. 1 point
    Why would there be images? You have to add them to your project with the correct path.
  28. 1 point
    What makes you think GSAP is the problem? Do you see any errors in your console? That should be your first step. And is this the correct path? <script src="js/main.js"></script> Go to your codepen demo and click the "export" button in the bottom-right side of the screen. Unzip it, and run the index.html in the dist folder. It should work.
  29. 1 point
    Hey, that looks good! 😀 I was actually going to make another version that was true isometric, but you beat me to it. Although, I was going to try a different approach. Instead of messing around with trig, I was going to use vectors, kind of like here. But what have should be fine, so I probably wouldn't worry about.
  30. 1 point
    Welcome to the forums! It looks like TweenMax is doing exactly what you're asking it to do (move the element with the class "PlayStationPlus" to the right by 600px). I'm pretty lost as to what exactly you're trying to do and why you think TweenMax isn't working. It looks like you've got a bunch of CSS animations applied to various elements. I'd suggest maybe starting with a much simpler setup, get an element or two animating, and then building on that. If you're still having trouble, could you please give us more info about exactly why you think TweenMax isn't working and what you're trying to do? A much simpler Codepen would also be very helpful. We'd love to assist you...I'm just not sure what you're asking.
  31. 1 point
    Ah — immediateRender. That took care of it. Thanks for your help.
  32. 1 point
    Zach, Thanks for your help and all the notations. After going back through it, we figured out what you meant. All good. Worked perfectly.
  33. 1 point
    I notice the first time my menu timeline animation is lagging (well, not the simple codepen version here). And if I apply the timeline.progress(1).progress(0) trick (as Jack points out in https://codepen.io/knalle/pen/NWWGRjB (line 30, I have added progress(0).progress(1) )
  34. 1 point
    I found the problem.... removing the transition/transform (transition: transform 4s; &:hover { transform: translateX(-700px); } css on the elements gave me the expected behavior from GS. Thanks for your help. Has anyone seen an example of how to achieve the horizontal infinite pic scrolling as on this page - https://brand.uber.com/ (scroll down a little)?
  35. 1 point
    Thank you for the great news, if you guys don't see the same negative effects that I do, then it can be fixed on my end I'll will investigate your suggestion, and see if I can create a demo while I seek a solution. ❤️
  36. 1 point
    You check if linear is working by rotating a box. Notice how linear rotates at the same speed. https://codepen.io/osublake/pen/ebd9504f755c55fabb4a26a30b31df20
  37. 1 point
    Wow! Thank you @ZachSaucier. Let me check it out. [Edit] I checked it out. Damn! You guys aren't playing. This is excellent.
  38. 1 point
    I've been noticing problems with the play button on certain pens that use GSDevTools. Clicking on the play button doesn't work all the time, and clicking anywhere on the screen acts as the play button.
  39. 1 point
    Sure. Unless stated otherwise, everything on CodePen has an MIT license. https://codepen.io/osublake/details/vvRWQd#details-tab-license
  40. 1 point
    SSR = Scale, Skew, Rotate (https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058) I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)
  41. 1 point
    @OSUblake Thank you for replying. I figured it out with the help of your example. Especially the map function. In action: https://map.polycode.co.nz/map Here's the code I used. I removed some parts to simplify it. If there's a more efficient/better way I could improve it let me know. var viewportWidth; var viewportHeight; var mapWidth; var mapHeight; var miniMapWidth; var miniMapHeight; var mapMarkerWidth; var mapMarkerHeight; var $viewport; var $map; var $draggable; var $miniMap; var $mapMarker; var pos; $(function() { $viewport = $('#viewport'); $map = $('#map'); $draggable = $('#draggable'); $miniMap = $('#miniMap'); $mapMarker = $('#mapMarker'); function loadMap() { // Code removed setMapDimensions(); } // Loader in front of this loadMap(); function setMapDimensions() { mapWidth = $map.outerWidth(); mapHeight = $map.outerHeight(); initDraggable(); } function setMiniMapDimensions() { miniMapWidth = $miniMap.outerWidth(); miniMapHeight = $miniMap.outerHeight(); $mapMarker.css({ width: ((viewportWidth / mapWidth) * 100)+'%', height: ((viewportHeight / mapHeight) * 100)+'%', }); mapMarkerWidth = $mapMarker.outerWidth(); mapMarkerHeight = $mapMarker.outerHeight(); } function initDraggable() { setDraggable(); var start_x = -(mapWidth - viewportWidth) / 2; var start_y = -(mapHeight - viewportHeight) / 2; pos = $draggable[0]._gsTransform; TweenLite.set($draggable, { x: start_x, y: start_y, force3D: true, transformOrigin: "left top" }); TweenLite.set($mapMarker, { x: (miniMapWidth - mapMarkerWidth) / 2, y: (miniMapHeight - mapMarkerHeight) / 2, force3D: true, transformOrigin: "left top" }); } function setDraggable() { viewportWidth = $viewport.outerWidth(); viewportHeight = $viewport.outerHeight(); Map = new Draggable($draggable, { type: "x, y", throwProps: true, trigger: "#viewport", bounds:{ top: 0, left: -(mapWidth-viewportWidth), width: mapWidth, height: viewportHeight }, onDrag: update, onThrowUpdate: update }); setMiniMapDimensions(); } function update() { TweenLite.set($mapMarker, { x: clamp(pos.x, 0, -mapWidth, 0, miniMapWidth), y: clamp(pos.y, 0, -mapHeight, 0, miniMapHeight), force3D: true, transformOrigin: "left top" }); } $(window).resize(function(){ setDraggable(); }); }); function clamp(x, a, b, c, d) { return c + (d - c) * ((x - a) / (b - a)) || 0; }
  42. 1 point
    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.
  43. 1 point
    Looks good! You can do this instead of using bind if you're using Babel or TypeScript. I think it's cleaner, and it should technically run faster. class ScrollAnimations { constructor() { // 'this' will work without the use of bind this.el.addEventListener('scroll', this.onScroll, false) this.rAF = requestAnimationFrame(this.run) } onScroll = () => { ... } run = () => { ... } } And here's a simple of example of how you can use the scroll position with a timeline.
  44. 1 point
    Hi @sheila Welcome to the forum. You can certainly animate a path as a mask. There is no 'r' attribute for a path though. That's the radius of the circle. You could morph it to a different shape, scale or rotate it no problem. Here's a fork of your demo with a scale animation. Does that help? Happy tweening.
  45. 1 point
    Hi, some time ago - a 'fork' of a German Havard Business Manager cover: Happy morphing ... Mikel
  46. 1 point
    Here's a random function for decimal values... function random(min, max) { if (max == null) { max = min; min = 0; } if (min > max) { var tmp = min; min = max; max = tmp; } return min + (max - min) * Math.random(); } Just pass in your min and max, and it will return a floating-point value. If you pass in a single value, 0 will be the default min. // This is the same... random(10); // ... as this random(0, 10); But we can improve upon that. What about probability? Here you go. Just pass in a chance value from 0 to 100. If you want something to have a 30% chance of happening,it would look like this. if (chanceRoll(30)) { // Do something... } function chanceRoll(chance) { if (chance == null) { chance = 50; } return chance > 0 && Math.random() * 100 <= chance; } And here's another handy function that will randomly choose a value for you. var direction = randomChoice("moveUp", "moveDown"); function randomChoice(choice1, choice2) { return Math.random() < 0.5 ? choice1 : choice2; } Another thing I would suggest is to animate your x and y values separately. When you animate them together, it looks very linear. Here's how I do that. tweenProperty(carl, "x"); tweenProperty(carl, "y"); function tweenProperty(target, prop) { TweenLite.to(target, random(1, 6), { [prop]: random(100, 200), ease: Sine.easeInOut, onComplete: tweenProperty, onCompleteParams: [target, prop] }); } Now it's time see all this in action. I really like your demo, but it looked like Carl was getting kind of lonely, so I invited his friend over, who goes by the name of Jack. Yeah, I know, but it's purely coincidental. Watch as they play together. They like to see who can spin around the most times. It's latest fad, and all the cool bats are doing it. .
  47. 1 point
    Hi reubenlara Welcome to the GreenSock forum. You can add a function using the add() method, but it doesn't take parameters. Please use the call() method like this: // change this .add(insertBG("01.png",".testcard"), "scene01") // to this .call(insertBG, ["01.png",".testcard"], this, "scene01") That should get you working correctly. Here's some more info about call() https://greensock.com/docs/#/HTML5/Animation/TimelineMax/call/ If you have other questions, it's usually best to start a new topic. When you post on the end of a thread that is marked answered your question could get overlooked and we want to get you the best answers possible. Hopefully that helps. Happy tweening.
  48. 1 point
    Hello, I have a square that I want to morph into three circles. Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape? The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up. Thank you! tl = new TimelineMax({}); MorphSVGPlugin.convertToPath("circle, rect") tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");
  49. 1 point
    @Mustana, good to see you hear in forums as well I noticed that you are expecting to use `e` (i.e. event object) inside the `onDragEnd` and `onDrag` callbacks but as per the documentation, you need to reference the `Draggable` object by using `this` keyword. So these lines: ... if (e.x >= 400) { ... and ... var clipProp = (e.x - 10) + 'px'; ... should be changed into: ... if (this.x >= 400) { ... and ... var clipProp = (this.x - 10) + 'px'; ... The event object that you were trying to access before is the one that is made available by browsers but the properties it carries, varies between browsers. So Google Chrome has the `x` and `y` exposed and your code seemed to work just fine but the cross-browser way would be to access the Draggable object by using `this` keyword and then access `x` or any other property through it. I hope this solves your problem.
  50. 1 point
    Hi wearetangerine as you can read in Doc. : A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time so , pls check this out : http://codepen.io/MAW/pen/wabEyg