Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      77

    • Content Count

      1,512


  2. GreenSock

    GreenSock

    Administrators


    • Points

      40

    • Content Count

      13,856


  3. OSUblake

    OSUblake

    Moderators


    • Points

      21

    • Content Count

      5,062


  4. Jonathan

    Jonathan

    Moderators


    • Points

      11

    • Content Count

      3,544



Popular Content

Showing content with the highest reputation since 01/12/2020 in all areas

  1. 5 points
    What you see there was some software I was developing that was a progression from a more convoluted process involving motion tracking. I was never very happy with the results and ended up using my initial process which I'll describe. So this initial process involved several steps using different software. I never posted the steps because it was really complicated and had a lot of quirks. If I remember correctly, I generated tracking data using Mocha inside After Effects. I then wrote a parser to convert it to a corner pin data format (basically an array of X and Y vector points). Then I used a library called PerspectiveTransform.js to apply the corner pin data to an element (this was crucial) — this could be anything from a video to an SVG or JPG. This library skewed and scaled elements based on their X and Y data. Then I converted the video I wanted to composite the element onto to an image sequence (massive faff!). A lot of people thought I was using video but at the time, video events and keyframes were really unreliable, the browser specs kept changing and it couldn't keep up with the data stream half the time anyway. I then created a player that accepted the image sequence, the element(s) to composite (these could be interactive like a DIV of HTML elements) and the corner pin data and married the whole lot up on a draggable timeline (that could also be played back). My overall aim with this project was to have interactive elements composited onto video and tracked in 3D space which I managed to do (I even managed to track an image sequence in 3D space composited on top of another video) — bizarrely all of the demos were done in Edge Animate because at the time I was transitioning from Flash to not Flash and I didn't know pure JS, CSS or anything. Chrome kept changing its video specs so every week or so I had to update my libraries. These changes were so frequent (and often broke all my work) that I eventually gave up because it was just far too much work to keep it maintained, plus the whole process of getting an interactive element tracked in 3D and composited onto video was a sprawling mess! Having said that, the results were pretty good so it wasn't all wasted time Hope that helps!
  2. 4 points
    The type needs to "cubic", and a cubic bezier needs a starting point. https://codepen.io/osublake/pen/f79dc245b16afad5b9710cebc8326d3c
  3. 3 points
    Hey ninmorfeo, Good question. The end property is perfect for this sort of thing: https://codepen.io/GreenSock/pen/povxZrK?editors=0010 Check out the MotionPathPlugin docs for more details and other properties. They're not too thorough at this point but we're working on improving them. Another resource that may help you understand how to work with motion paths is this helper function that animates the drawing of a line to specific anchor points.
  4. 3 points
    Creating noise is just like calling a random function. The difference is that values won't vary as much, resulting in a more natural look. It's great for generating stuff like waves or terrain. Just a random Codepen I found that uses noise to generate waves. https://codepen.io/soju22/pen/PLeLwo
  5. 3 points
    That's the audio levels, but you can probably fake the values. Try searching for simplex and perlin noise. It can be used to create naturally random looking patterns.
  6. 3 points
    For future readers: Note that if you need to animate only some of the border radiuses or animate the radiuses in different ways, you can do so by animating the specific properties like borderTopLeftRadius, borderBottomRightRadius, etc.
  7. 3 points
    Okay, so the issue here is that even though you set border-radius in your CSS, getComputedStyle() in Firefox reports it as blank! I'd certainly consider that a bug in Firefox. In the next GSAP release, I work around this by sensing that condition and then pulling the value from borderTopLeftRadius. It seems to work well. Feel free to try it for yourself in the beta file: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Better?
  8. 3 points
    Hey MeLight and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. The main issue here is that elements with display: inline (like spans by default) aren't affected by transforms like your attempt to animate the x property. If you use GSAP to set the display to inline-block instead, it will animate in the x direction. However, you need to make sure the spaces between elements are retained, so I also added spacer elements in the demo below. https://codepen.io/GreenSock/pen/wvBxWJx?editors=0010 Side note: .innerText is more performant than .innerHTML if all you're doing is changing text
  9. 3 points
    Actually, all you need to do is set useRadians: true in your motionPath vars. Sorry, we're still working on the docs, so not everything is there yet. But this should make it pretty easy for you - no proxy necessary. https://codepen.io/GreenSock/pen/bGNjpKo?editors=0010
  10. 3 points
    Yes, that's actually by design and it's easy to "fix". Just set curviness: 0. That's it. The reason it behaves that way (easing in and out of each position) is because that's typically the desired behavior when things are traveling through points. Imagine animating the scale of something through various values - it's a really nice effect to have it kinda ease in and out of each position, but that's DIFFERENT than the easing of the playhead across the overall tween. Anyway, the default curviness is 1, and when you're dealing with a 1-dimensional animation like this (only the "x" property), that affects the easing in/out of each value along the way. Setting curviness to 0 basically forces it to be completely linear. Does that clear things up? https://codepen.io/GreenSock/pen/0a8b82bf4a01c9d696398d13b49f1f0b?editors=0010
  11. 3 points
    Hi @Wayrse and Welcome to the GreenSock Forum! I was going to fork it but since its a Private pen so I cant. Please see below to see why it wasn't working. Since you are using the new GSAP 3 syntax then you need to convert your gsap.to() tween to the following: gsap.to() https://greensock.com/docs/v3/GSAP/gsap.to() You have this with old GSAP 2 syntax with the duration as your second parameter: // you have this using GSAP 2 syntax test.to('.box', 1, {borderRadius: '10px'}); But it must be like this with the duration being one of the vars parameters for GSAP 3 syntax as the 2nd parameter of the new gsap.to() method: // should be this using GSAP 3 syntax test.to('.box', {borderRadius: '10px', duration: 1}); If you increased the duration you can see it better interpolate your border-radius, but even with 1 second you can see it animate even though its fast. https://codepen.io/jonathan/pen/dyPKdwX Happy Tweening!
  12. 3 points
    That's just an order-of-operation thing. One of the biggest benefits of using GSAP is that you always get consistent order-of-operation with transforms, but you've got an edge case that uses a non-standard ordering of the transforms (you're rotating FIRST and then translating but usually it's the other way around). Trust me - consistent order of operation is a GOOD thing If you need an explanation as to why, let me know. There are many ways you could solve this with GSAP. The simplest is probably to just put the element in a container and rotate the container. Another option is to do the math to figure out where the x/y translation would be at that particular rotation and then skip the rotation altogether. Here are both solutions in a forked codepen: https://codepen.io/GreenSock/pen/5b4de068efd5061dfa965fab06d53ed7?editors=0010
  13. 2 points
    Both of these definitely have given me the insight I need to create what I'm looking to do. My stumbling point was just figuring out how to take a value that is in between a max/min value (in this case Hue) but have it loop. So often I'm just animating straightforward from/to variables. Not a start at a middle value and then increment/loop between the max/min. Thanks you two ! I should be launching what I have in a couple of days and I'll post the implemented project.
  14. 2 points
    Cool animation! I like it. Very good question. repeatRefresh currently only works when the tween itself is what has the repeat property on it. Since you're repeating an entire timeline, the individual repeatRefresh isn't applied. To work around that, you could create a new set of tweens for those that you want to repeat with different values after the timeline has completed. I also set the progress to 0 of your CodePen timeline and invalidated it because it ends up in a different place (the ornaments timeline ends up in the same place as it starts so you don't need to do that). https://codepen.io/GreenSock/pen/GRgYOjj?editors=0010 Side note: you can use the delay or repeatDelay properties instead of empty tweens if you'd like.
  15. 2 points
    @ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent. Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): https://codepen.io/GreenSock/pen/mdyzBXN?editors=0010 There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way.
  16. 2 points
    No. You likely don't need to register the plugins at all since you're just using plain HTML files. You need to load all plugins in their own script tags after GSAP is loaded but before your build file.
  17. 2 points
    No problem at all! Things like that can be tricky. They're only simple if you know the answer
  18. 2 points
    Hey isladjan, welcome to the GreenSock forums! This is a good question. Sorry, we're still in the process of updating our docs (it's a long process to document all of the changes and new things!) so onInterrupt is not in there yet. The GSAP 3 Release Notes say This means that onInterrupt only fires if the tween is effectively killed, meaning something like .kill() is used on it or another tween affecting the same target has overwrite: true. It might be worth observing how the different overwrite values affect your animation: https://codepen.io/GreenSock/pen/WNbaoXG?editors=0010 Are you trying to achieve something specifically? Maybe some context can help you figure out the setup that you need.
  19. 2 points
    Hey kailin and welcome to the GreenSock forums. Good work converting most of it to GSAP 3! The biggest issue is that .progress() can't be negative in GSAP 3. So you should use GSAP's .wrap() utility method to keep it in the range of 0 and 1. I went ahead and straight converted the pen you used as a reference to GSAP 3 because I thought it'd be simpler for me to debug: https://codepen.io/GreenSock/pen/JjomKjq?editors=0010 Just applying that fix to your demo makes it function well: function updateProgress() { animation.progress(gsap.utils.wrap(0, 1, transform() / entireSize)); } Keep in mind that InertiaPlugin requires at least a Shockingly Green Club GreenSock membership. We'd love to have you join the club!
  20. 2 points
    It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.
  21. 2 points
    @GreenSock @ZachSaucier @Jonathan Thank you all for taking the time to help! I can confirm that the beta link fixes the issue and targeting borderTopLeftRadius etc. works as a workaround. Thanks again!
  22. 2 points
    Hey JLernDesign and welcome. You shouldn't need the map files but they can be found here. Would you by chance be attempting to load ScrollMagic as well? If so, you should probably use this PR that's built to work with GSAP 3. This thread is about a similar issue:
  23. 2 points
    That's not true - we recommend that people put the duration inside the vars parameter in GSAP 3 but they are allowed to put it as the second parameter if they want. Anyway, it's unrelated to this issue in Firefox. Your pen is still not working the same as other browsers for me at least (on Catalina). Your misreading my post and whats in my code block. The 2nd parameter for GSAP 3 gsap.to() is the vars parameter. That is what i wrote and what's in my codepen. I have the duration parameter in the vars, which is the 2nd parameter of the gsap.to() method! I see it animating in latest Firefox Windows 10 with that change.
  24. 1 point
    Hey Zach, With a different approach (including svgOrigin) it now runs perfectly on the 'wheel'. But the problem has shifted to the other side. However, the effects here are minimal. https://codepen.io/mikeK/pen/GRgYaVJ Kind regards Mikel
  25. 1 point
    @ZachSaucier I can't repro it on CodePen using the same library versions. I suspect that there's another instance of gsap bundled in my client's global js package. Sorry for not catching this earlier and thanks for your patience!
  26. 1 point
    I'm sorry. I was sleep deprived and overreacted. Thanks for you help, guys. What I'm trying is more code related than webflow's. Zach gave me the hint I needed. Now I just need to figure out how to call that scroll position update after draggin horizontal. I will do my research. Thanks again.
  27. 1 point
    Working for a UK based company in Manchester, I am looking for assistance to develop a number of animations for our new responsive website. I am a developer myself but having only just started with GSAP, the timescales for the project completion date unfortunately do not allow for the time to learn. Part of the role would be to explain the code – if not self-explanatory – allowing us to feel comfortable managing the code in the future. My assumption is each work package can be a self-contained allowing me to drop into the page where necessary. The designs are approved, and development started. We will supply the SVGs and if necessary some video examples of the actions. After I have put together the whole site it will be put into Umbraco CMS for management by the Content Editor team. Apart from my the development aspect main my requirement is it needs to be absolutely perfect on in all browsers and viewports with the code easy to understand and nicely written. If anything slightly jumps, delay on hover I see it straight away, and can’t get past it! The more local to ourselves the better, but would prefer an someone with the GMT timezone to help with communication. The work can be completed ASAP once you are set up on our supplier database, and would love forward to you bringing your ideas. If you bring high level skills in the areas of GSAP, JavaScript, CSS and you have a portfolio you can present us, please feel free to contact us with reference material. I can then send you the designs in more detail.
  28. 1 point
    I totally understand that you try to keep things small and lite weight. Means i will manage from now on to transform margin, padding, border-width and border-radius by their 4 different "values". Since this issue is for all those style attributes the same: https://codepen.io/themepunch/pen/jOEvjgJ No Problemo ! Thanks for the feedback, and now i know what to do ! Wish you a great weekend !
  29. 1 point
    Alright, got it working... I created a reduced example that is closer to the actual problem I was having in my real-world project. I took what you guys presented and modified it slightly. I not only wanted to post it here just in case someone else runs across the same issue, but hopefully check with the experts whether it is violating some React rule that I'm unaware of. (I'm still pretty new to React) What I did differently was to not connect multiple refs together in useEffect, but simply call the ref name with .current attached anytime GSAP needed to find the reference. i.e. gsap.to(myRefName.current, 1, {x:100}); Here is my sandbox... https://codesandbox.io/s/draggable-problem-v05a-wdraggable-z1q0z Thanks again for your help, Rick
  30. 1 point
    Welcome to the forum @asilva I don't think any perceived sarcasm was intended, this forum is a very friendly place. Oddly that webflow demo loads Tweenmax but unless I am overlooking things or blind it appears any reference to GSAP in the code was removed or never called? Interestingly it seems derived from the below codepen by @@jesper.landberg which does use GSAP, but neither appear to call Draggable unless I blindly overlooked it. https://codepen.io/ReGGae/pen/QZxdVX Don’t know much about webflow but it appears you can clone that project into your own account from the below link and play with/modify it. https://webflow.com/website/Bouncing-Scroll If you have questions specific to webflow or how to implement that example along with other webflow features, then I would probably suggest asking on the webflow forums as that is specific to webflow.
  31. 1 point
    Right, this is what we were saying - if you're going to go through the trouble of setting different border radiuses for each corner then we think it's fair if you set the animations for them individually as well. We didn't think it was worth making everyone who uses GSAP pay the kilobytes to support looking for and setting each individual border radius automatically because most likely 99/100 people would never use that feature. Does that make sense?
  32. 1 point
    Hey Ainsley. I would use a different approach. Instead of trying to keep track of which slide is next and previous, just make use of how the document select elements by removing and appending the elements. It's best to use clones of the elements so that there's no jumps perceived. I also recommend animating a container instead of each individual element. Take a look at my implementation and let me know if you have any questions! https://codepen.io/GreenSock/pen/XWJPxBB?editors=0010
  33. 1 point
    HAHA got it to work. I wasn't loading any GSAP at all! I was only loading TweenMax and DrawSVGPlugin scripts. I replaced TweenMax cdn with GSAP script from our server. Thanks!
  34. 1 point
    '5.7777 1.33 8.333333333'.replace(/(?<=\.\d\d)\d+/g,'') Like this
  35. 1 point
    Hey ninmorfeo and welcome. It's hard to tell without a demo exactly what you're looking for, but I think you're looking for this? onComplete: function () { console.log(gsap.getProperty(this.targets()[0],"x")); }
  36. 1 point
    Ah, I understand what you mean now that you've added the image. You're saying that sometimes in the very last event caused by clicking the button (without the user manually scrolling them self) scrolling is false. This is actually kind of tricky. What I believe is going on (I could be wrong): The window checks for scroll changes even n milliseconds (because it can't check every 0 milliseconds, that's impossible). This is somewhat asynchronous to GSAP's updates. Sometimes that check falls right between when GSAP updates the scroll position for the last time and the onComplete when scrolling is made false, which would report that scrolling is true. Other times, that check falls right after GSAP calls the onComplete callback, in which case scrolling is false. I don't think there's really a way to work around this using the current setup. However, I would do something like the below where GSAP is fully in control of reporting the status of scrolling because it's guaranteed to be in order like you expect. https://codepen.io/GreenSock/pen/WNbgeZj?editors=0010 If, for some reason, you also need to have the scroll being listened to and that variable checked you could enable and disable it during the tween: https://codepen.io/GreenSock/pen/YzPOKaP?editors=0010
  37. 1 point
    I see. You could use regex to shorten/round them like the edit to my previous post said.
  38. 1 point
    @benoit GSAP doesn't have anything like that built in. Tools like SVGOMG have this feature as part of their minification process (it's called "Round/rewrite numbers" on there). You should be using something like SVGOMG to reduce the file size of your SVGs anyway. Alternatively you could use regex to truncate the numbers or regex + JS to round them quite easily.
  39. 1 point
    I'd do something like this, no need for ScrollMagic. https://codepen.io/GreenSock/pen/KKwBYwP?editors=0010 Notice that you don't need to put quotation marks around numerical values.
  40. 1 point
    Hey jsco, This is the issue. If you try to animate the rectangle along the paths it will be jumpy and not a smooth animation because the paths are poorly formed and their endpoints don't match up. There's no way to fix the jumpiness without editing the paths. The first thing you should do is improve (or have someone improve) the exporting of the lines. This sort of line should optimally be done using one path with only two points and then an arc.
  41. 1 point
    All of the titles are offset. Again, it's a logical issue Unfortunately I don't have the capacity to investigate the issue because there is too much code for me to wade through and it's not an issue with GSAP. Maybe someone else in the forums will be able to help you or you'll be able to figure it out. The code that you posted in the last post is surely related but I can't say whether or not it's the only thing you'll need to change.
  42. 1 point
    Again, not a GSAP issue. It's a logical issue. Essentially what's happening: as soon as it crosses 100%, it jumps to 0. As a result, just add another duplicate of the first project name at the end of the list: https://jsfiddle.net/hmrfzop1/ Note that I only changed your HTML by adding an extra <a class="p-titles__title | js-title" href="#">Project 01</a>
  43. 1 point
    We likely cannot help until you produce a minimal demo or at least code about what you are asking about.
  44. 1 point
    @ZachSaucier is correct - GSAP just uses Math.random(), so unless I'm misunderstanding your goal I don't think seeding is possible.
  45. 1 point
    Yes, it animates. But it animates from 0px to 10px, not 50px to 10px.
  46. 1 point
    Hello everyone, This is my first post here. I am writing about an issue that is messing my mind. The example is simple so you can try on your own, lets start with timeline and three children: var t = gsap.timeline( { paused: true } ), myObj = { width: 0 }, a = gsap.to( myObj, { duration: 0.8, width: '+=100' } ), b = gsap.to( myObj, { duration: 0.7, width: '+=200' } ), c = gsap.to( myObj, { duration: 1.1, width: '+=300' } ); t.add( [a, b, c] ); After that, removing the tween "b" works fine: t.remove( b ); So by calling t.getChildren( false ) returns 2 tweens which is also fine. However, when I tweak the "b" tween after removing it from timeline "t" it causes unexpected behavior for me at least. Lets say for example setting progress to 50%: b.progress( 0.5 ) The timeline will return 3 tweens again, and the "b" tween is assigned as the first element in timeline that is previously removed from. Is there anything here I am doing wrong? Thank you. P.S. The same code works differently (correct) with version 2.1.3 of GSAP -> https://bit.ly/2tMK2C6
  47. 1 point
    Hey benjino, The only resource related to GSAP that I see being loaded by your page is https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js. Make sure to load GSAP 3 via the CDN: https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js You should also update your code to GSAP 3's format. Here's how I'd convert it: jQuery(document).ready(function($){ //when js kicks in show gsap.set("#drawsvg_content, .arrow", {visibility:"visible"}) // sm_icon drawSVG gsap.fromTo("path", {drawSVG:"50% 50%"}, {duration:1.75, delay:1, drawSVG:"100% 0%", ease:"none"}); //stagger in next 3 and have them remain gsap.from("#icon_behind, .home_intro, .arrow", {duration: 1, delay:.3, autoAlpha:0, scale:.5, ease: "power4", y: -150, stagger: 0.2}); }); Notice that staggers are now a part of every tween! So you don't have to use a specific method for staggers like staggerFrom.
  48. 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.
  49. 1 point
    You can just add more elements to your HTML and call parallaxIt on them from callParallax like so: https://codepen.io/GreenSock/pen/OeqgrZ
  50. 1 point
    I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/
×