Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      3,988

    • Content Count

      7,475


  2. GreenSock

    GreenSock

    Administrators


    • Points

      3,421

    • Content Count

      16,391


  3. PointC

    PointC

    Moderators


    • Points

      2,297

    • Content Count

      4,326


  4. akapowl

    akapowl

    Moderators


    • Points

      2,184

    • Content Count

      834


Popular Content

Showing content with the highest reputation since 04/22/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. 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 Using fromTo() when from() or to() would work 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
    13 points
  3. 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
  4. 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).
    12 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
    11 points
  6. Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application
    10 points
  7. 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
    10 points
  8. @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
  9. 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
  10. 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
  11. I know this thread is now over a month old, but I wanted to share a fork of Zach's pen. I made a 6-sided die from the cube. To simplify/clarify, the 3d rotations are moved out of the CSS. Hopefully this demo is useful to someone... https://codepen.io/creativeocean/pen/qBRbNwa
    8 points
  12. 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
    8 points
  13. 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
  14. 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
    8 points
  15. 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"}
    8 points
  16. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
    7 points
  17. I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. https://codepen.io/waaark/pen/VbgwEM https://codepen.io/Zaku/pen/JNxKKY
    7 points
  18. My recipe a little trial & error and remove the ****. https://codepen.io/mikeK/pen/VwwwGrd Happy morphing ... Mikel
    7 points
  19. lol. then that's probably a good place to stop. Unfortunately, the many folks like @PointC that have volunteered countless hours of their time over the years don't often have the luxury of making sure that every line of code is understandable to everyone of every skill level that passes by. The original poster was already satisfied so there's really no need for a committee to come in to do a code review. If you have an alternative, cleaner solution that would certainly be a welcome addition that would add value to the thread. If something isn't clear you can simply as
    7 points
  20. Greensock is incomparable, and I just wanted to say thank you @GreenSock and all parties involved for making this unbelievable product.
    7 points
  21. We're looking for an independent front-end developer and creative technologist who loves animation and helping people. A great fit for this role would be someone who is: Independent – This role has a lot of independence. We’re looking for someone who is comfortable with being given an idea and running with it. When they see something that needs improvement, they take initiative and either tackle it themselves or delegate it to the appropriate person. A community builder – A major part of this role is investing into the GSAP and animation community both in the GSAP forums and b
    7 points
  22. Hey @sorciereus, You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ... https://codepen.io/mikeK/pen/PobOwjN Happy landing ... Mikel
    7 points
  23. Hey, A little experiment on how ScrollTrigger and snap could be used. Just for info. Happy tweening ... Mikel
    7 points
  24. Hey, I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after). Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page. This is the repo url: https://github.com/rhernandog/gsap-flip-react Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js Here is the live sample: https://rhernandog.github.io/gsap-flip-react/ Based on your initial post in the thread
    7 points
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. I converted Blake's pen to GSAP 3: https://codepen.io/GreenSock/pen/PoNZxqX?editors=0010
    7 points
  31. 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
    7 points
  32. Check this out - just released today: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()
    7 points
  33. 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
  34. Wish granted: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
    7 points
  35. 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
  36. Hi Stefano, Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo. There are a few ways to do this but I will start with a fairly basic approach to see if that works for you. To chain these 2 timelines together you can add them both to another timeline, often called a master or parent. GSAP 3 Beyond the Basics has some lessons on this. https://codepen.io/snorkltv/pen/abpaPEJ?editors=1010 notice your child timelines are no longer paused and they are added to master. your button now controls m
    6 points
  37. Hi, Yeah, responsive vertical accordions are not the simplest thing, but they're not the hardest neither. It's just about wrapping your head around handling the content height changes and how GSAP works. This sample is not very elegant but it's a solid approach to this. I don't know if it's the best approach, but it works: https://codepen.io/rhernando/pen/ZbGeJd The code is quite commented so all the explanation and thought process is there. Hopefully is enough to get you started. Happy Tweening!!!
    6 points
  38. Hi and welcome to the GreenSock forums. So glad you provided a demo with most of it working. Saved me loads of time! The trick here is that we are not going to add the stars scene1() animation to the main timeline. We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want). Note that scene1() now just returns a timeline. I added GSDevTools so that you can see that the main timeline has a finite duration https://codepen.io/snorkltv/pen/JjErJvP?editors=0010 This video explains
    6 points
  39. this demo by @OSUblake may help with some of it. https://codepen.io/osublake/pen/XJQKVX it looks like you would have to add code that leaves the original in place. this pen by @Rodrigo shows how to make copies of the thing you are dragging, maybe it will help as well. Drag the numbered blue divs around. https://codepen.io/rhernando/pen/mJqwZq
    6 points
  40. Just my two cents but I'd take advantage of the .wrap() utility method and target the container and the image in the same tween. You could check the index of the loop target and flipflop the .wrap() array depending on whether the index is odd or even. That way you wouldn't need to add the extra class to your HTML markup. You can then add a bunch of copies of the targets without worrying about the left/right class. Maybe something like this: https://codepen.io/PointC/pen/14db07e23ea1235bc448c229a757098c More info about .wrap() https://greensock.com/docs/v3/GSAP/Util
    6 points
  41. These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch It essentially triggers them in close proximity to each other. You can read up on the method in the docs. It is quite extensive and thorough. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well. https://codepen.io/dadacoded/pen/94b47a1c756f829787ed27e177cd0b36
    6 points
  42. I'm not quite sure which three you mean, but here's a basic example of using a label and starting three tweens at the same time. https://codepen.io/PointC/pen/063602d13b661983d59411b5660d08a8 Does that help?
    6 points
  43. The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See why GSAP is used by roughly 10,000,000 sites and many major brands. Hang in there through the learning curve and you'll discover how fun animating with code can be. We promise it's worth your time. Quick links What is GSAP? Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Stag
    6 points
  44. Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Creating to() logic issues Nesting ScrollTriggers inside multiple timeline tweens Using one ScrollTrigger or animation for multiple "sections" Forgetting to use function-based start/end values for things that are dependent on viewport sizing Start animation mid-viewport, but reset it offscreen Creating ScrollTriggers out of order Loading new content but not refreshing Why does my "scrub" animation jump on initial load? Or my non-scrub animation start playi
    6 points
  45. You're loop is running the same logic over and over. It will always be the condition of the last loop. You probably need to use a for loop with something like break or continue. See how I do it here. https://codepen.io/osublake/pen/ae04f1f23935e7d7a13c823d6141dec2
    6 points
  46. ...unless you use Andreas Borgen's HyperMorph 3000™ 😋 https://codepen.io/Sphinxxxx/pen/pZQRGB Note: Just kidding - Not Mine - And Sorry for crashing the thread - but I had to 😁
    6 points
  47. I wouldn't normally post someone else's CodePen demo, but this one by @creativeocean really caught my eye. Very clever use of SVG masks. Great job Tom. 👏
    6 points
  48. Hi @vino3d, welcome to the forum. Of course what you could do with ScrollMagic you can now do with ScrollTrigger and much more. As you mentioned that you are trying to learn I would direct you to the ScrollTrigger starting guide by @Carl. It has few simple demos that would get you started, I think that is the best way to learn. By building few simple demos with ScrollTrigger you will see how animations are triggered and you will be able to build the animation as in your example in no time. I have also GreenSock 101 online course that
    6 points
  49. This would be doable in many ways. I don't see why you would need DrawSVG for the example you posted. It could be a simple linear tween in Animate, or with GSAP, or with GSAP in Animate. One possible issue to consider, if you do want to use DrawSVG in a banner, is that unlike the core GSAP library, this plugin won't already be hosted on the ad server's CDN. You would have to include it and the file size would count against you.
    6 points
  50. 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/jOWOr
    6 points
×