Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      4,277

    • Content Count

      6,712


  2. GreenSock

    GreenSock

    Administrators


    • Points

      3,103

    • Content Count

      15,749


  3. OSUblake

    OSUblake

    Moderators


    • Points

      2,317

    • Content Count

      5,848


  4. PointC

    PointC

    Moderators


    • Points

      2,154

    • Content Count

      4,070



Popular Content

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

  1. 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
    24 points
  2. 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 sk
    13 points
  3. With over 100,000 posts in the popular GreenSock forums, we've noticed some common mistakes that you'd be wise to avoid. We threw in a few tips as well. Here is a summary of the mistakes: Creating from() logic issues Not setting ALL transforms with GSAP Not using xPercent and yPercent Recreating animations over and over Adding tweens to completed timelines Not using loops Importing things incorrectly Using the old/verbose syntax Creating from() logic issues It's usually smart to use .to() and .from() tweens instead of .fromTo() be
    11 points
  4. @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?
    10 points
  5. 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
    9 points
  6. Conventional wisdom says that kilobytes have a direct impact on load times and consequently user experience. Too many developers, however, myopically focus on a simplistic (and rather dated) "aggregate total file size" mentality and completely miss the broader goal of improving user experience. This article aims to challenge the old paradigm and explain why "spending" kilobytes on a library like GSAP can be a very smart move. Kilobyte cost factors When you're assessing kilobyte cost in a modern, nuanced way consider these factors: Performance yield Some kilobytes
    9 points
  7. Hi everyone, as some of you might know I have been working on putting together a series of GreenSock tutorials based on examples from cool award winning websites. Practical GreenSock is now open for signups and you get also a nice launch bonus (40% off Club GreenSock!) from the @greensock team If you have any feedback, questions or suggestions, please let me know. I did run a giveaway on my site that is now closed. I know I should have invited some of the GreenSock fans from the forum to enter but there was so much to do to get the courses live that I forgo
    9 points
  8. 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?
    9 points
  9. 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 care
    8 points
  10. Definitely don't know what you're asking, but if you're rotating an element, then getBoundingClientRect might not be the values you are expecting. This demo draws the coordinates of getBoundingClientRect around rotating elements. https://codepen.io/osublake/pen/wRvjJL If you're trying to do circle collision detection, that's super easy. Just compare the distance to the sum of the radii. https://codepen.io/osublake/pen/LYNLxYr
    8 points
  11. 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. E
    8 points
  12. 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 lay
    8 points
  13. Hey @maxvia I am no react guy, so I can not tell you on how to implement this with react, but I can show you one example of how to achieve this sort of effect. ***** Please take note of the Edit added to the bottom of this post with regard to the setup ***** It is pretty straight to get there with ScrollTrigger and this being all the JS you need for this version: gsap.set('section.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover .to('section.footer-container', { yPercent: 0, ease: 'none' }) ; ScrollTrigger
    7 points
  14. Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon).
    7 points
  15. As yourself and others have mentioned you can use libraries like Three.js, Pixi.js, Babylon.js, TWGL.js, Curtains.js, etc., etc. I suggest that you pick one, learn it and run with it. Let them do the heavy logic unless you are prepared to take a generalized deep dive and potentially reinvent the wheel. Either way there is gonna be a learning experience ahead of you. But in doing so it will open your possibilities for development and creativeness going forward. So don't get discouraged and press onward. The following tutorial might help you learn some things for the effect using Thr
    7 points
  16. Hey @sadeghbarati007 You can most certainly achieve this by adding a second ScrollTrigger to that setup and calculate its start to be slightly before the end of scrolling. This way, you'd have to invalidateOnRefresh though, and use function-based values for the start, to make it work properly after resizes, too: https://codepen.io/akapowl/pen/LYNyLpX Or you apply the ScrollTrigger to a timeline instead and set the duration and start-point of the opacity-tween within that timeline to something like this .to('progress', { duration
    7 points
  17. First of all GSAP is a great tool that gives us so much power when it comes to creative coding. That makes it a pleasure to work with, that's why I had a great time putting these courses together. But it would not be possible without the help of this forum, @GreenSock, @PointC, @Carl, @ZachSaucier, @OSUblake and others. Thank you! 🙏
    7 points
  18. If I understand the desired outcome correctly, I'd think a skewed rectangle and scaleY animation would work well. https://codepen.io/PointC/pen/441e6a9cab01b783ed98fcf36f20fcf9
    7 points
  19. I like using dat.GUI to quickly test out different values for my animations, but it requires building custom functions to update everything, which can be time consuming and require a lot of code. So I wrote a template parser to make updating values easier. It will inject the new values in template for you. Really easy to use. Create your settings. const settings = { myValue: 100, name: "Blake", color: "#ff0000" }; const gui = new dat.GUI(); gui.add(settings, "name").onChange(update); gui.addColor(settings, "color").onChange(update); // number values are min,
    7 points
  20. Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas. function render() { context.drawImage(images[airpods.frame], 0, 0); } If the images have a transparent background, then it would be only 2 lines. function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[airpods.frame], 0, 0); } https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6
    7 points
  21. I converted Blake's pen to GSAP 3: https://codepen.io/GreenSock/pen/PoNZxqX?editors=0010
    7 points
  22. Check this out - just released today: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()
    7 points
  23. Congrats on your new journey, can't wait to take part in it! Your "first year of gsap" post moved me so much... and your work inspires me on a regular basis. I don't even know how to express my gratitude for you sharing all this with us. What a fitting way for you now to spread your passion on to the future.👏
    7 points
  24. Wish granted: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
    7 points
  25. 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?editor
    7 points
  26. 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"}
    7 points
  27. 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.
    7 points
  28. You can skew elements based on the scroll velocity using the InertiaPlugin or ScrollTrigger: With the InertiaPlugin With ScrollTrigger
    7 points
  29. 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://mediu
    7 points
  30. Hey @Robert May, this example could be helpful - its still gsap 2.0 https://codepen.io/mikeK/pen/ZwmdYv Happy tweening ... Mikel
    7 points
  31. Hey, A prehistoric animation, no-scroll https://codepen.io/mikeK/pen/BaNPLNL Stay healthy ... Mikel
    7 points
  32. 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 positi
    7 points
  33. 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. 😉
    7 points
  34. 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
    7 points
  35. this demo should help https://codepen.io/snorkltv/pen/JjowpLO
    6 points
  36. In case it's helpful to anyone else, I put together a demo that has directional snapping, variable width sections, and nav links: https://codepen.io/GreenSock/pen/xxEQNBB?editors=0010 🎉
    6 points
  37. Hey @Love Kumar, Is it what you expect ??? https://codepen.io/mikeK/pen/oNxrzaz?editors=1010 Happy rotating ... Mikel
    6 points
  38. Making use of some gsap utils. https://codepen.io/osublake/pen/f4218d74342b41f7c984c0cc4ba4ce2b
    6 points
  39. In case anyone else is wondering about this, here's an example of how to do animations on the GPU. Animating a million particles shouldn't skip a beat, even on a phone. 😲 https://codepen.io/osublake/pen/NWNNZKe
    6 points
  40. It's just an extra line of code. <script src="cdn1.gsap.js"></script> <script>window.gsap || document.write('<script src="cdn2.gsap.js">\x3C/script>')</script>
    6 points
  41. Hi @HeroMeiKong, I'm pretty sure this is due to your div {} styling. When you add markers, a <div> is appended to the page to hold them, so these markers are inheriting the div styling from your stylesheet, thus affecting your layout/page. It's best to add a utility class and avoid generic element styling like this. Also, adding a minimal example, or at least indenting your code, would be very helpful in trying to debug/understand what's happening.
    6 points
  42. Hi Federica, we went through GSAP only smooth scrolling in another forum thread. Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling. https://codepen.io/ihatetomatoes/pen/PoZLpbp Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable. Scroll responsibly
    6 points
  43. 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).
    6 points
  44. 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.
    6 points
  45. Hey Horse friends, These horses elegantly take the curves https://codepen.io/mikeK/pen/Exjzejr And the winner is ... ? Happy riding ... Mikel
    6 points
  46. Mhhh... I'm not sure if I follow what you're trying to do, but it could be a eased stop to 0 degrees? I remember a sample from @Carl about easing the timescale so partial credit to him, hopefully this is close to what you want to do: https://codepen.io/rhernando/pen/zYGeXEB The idea is to tween the animation instance's timescale to make it faster/slower and then in the stop button use the directional rotation feature of the CSS Plugin to rotate the to the shortest end angle. Now this only scratches the surface of this, since you still need to calculate, acco
    6 points
  47. Credit to who? That's a fork of one of mine. Just giving you a hard time. Welcome to the forum. Just another little nugget of info for you — you can also use a clip-path for this type of reveal. Masks can also use strokes and gradients so you can get all fancy with them. Here's a little example for you. https://codepen.io/PointC/pen/VwLVxwx Hopefully that helps. Happy tweening.
    6 points
  48. 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.
    6 points
  49. You should probably read through their docs. It says there are events, which you should be able to use to control gsap animations. https://github.com/locomotivemtl/locomotive-scroll
    6 points
  50. 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
    6 points
×