Jump to content
GreenSock

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

Leaderboard

  1. GreenSock

    GreenSock

    Administrators


    • Points

      3,370

    • Content Count

      17,092


  2. ZachSaucier

    ZachSaucier

    Moderators


    • Points

      2,793

    • Content Count

      7,488


  3. akapowl

    akapowl

    Moderators


    • Points

      2,755

    • Content Count

      1,061


  4. PointC

    PointC

    Moderators


    • Points

      1,890

    • Content Count

      4,369


Popular Content

Showing content with the highest reputation since 07/25/2020 in all areas

  1. 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
    14 points
  2. 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).
    14 points
  3. 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
    13 points
  4. 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
    11 points
  5. 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
  6. Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM: https://codepen.io/GreenSock/pen/abWLgwY?editors=0010 🎉 That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value.
    8 points
  7. oh, ok, probably best to continue in that thread. It was very nice for @Ali Manuel to help you but we don't typically have the capacity to rebuild other people's projects on demand with new specifications. While I'm here though I believe making this full-screen will require some significant changes to the CSS and it's not really something that you would do with GSAP. If you have a question related to GreenSock animation please don't hesitate to ask.
    8 points
  8. 🤔 Well, I'm also not sure what the desired outcome is here. But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does. In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might
    8 points
  9. Okay, I think I get it. I made a couple demos for you. I used a wider path just so it's easier to see what's happening. You could use gradientTransform like in your 2nd demo, but I'm not sure that gets the desired result and I have no idea about browser compatability on that one. https://codepen.io/PointC/pen/a774175618d8c17aa07fcd59e28119ed My preference would be to animate the x1/x2/y1/y2 attributes. I'd also use objectBoundingBox (default) for the gradientUnits. In this case I find it a bit easier to use values from 0 → 1 rather than keep track of a
    8 points
  10. 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
  11. 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
    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 took a slightly different approach. I created a timeline for each circle. (I removed the groups as they aren't really necessary here). This way you can copy/paste in more circles and the animation will adjust accordingly. The secret with the scale tween is just the same as @elegantseagulls did. Make the duration half of the orbit and use a yoyo tween. https://codepen.io/PointC/pen/xxqrqby Hopefully that helps. Obviously you can adjust durations and eases to your liking. Happy tweening.
    7 points
  16. Hi @rcneil, You can just add another tween to take care of scaleing. Something like: gsap.to("#graphic-1", { duration:5, repeat: -1, ease: "none", scale: .2, yoyo: true, }); would do the trick. Looking at your animation, though here's a few things that could help simplify: 1: Combine the graphics into a single tween and loop/offset them with stagger 2: Comnbine motionPath and scale tweens into a single timeline Check it here: https://codepen.io/ryan_labar/pen/rNywmLX?editors=0010
    7 points
  17. @Jim Nayzium, A tween is just that, a single tween of one or more properties on a matched element or elements. A single element https://codepen.io/sgorneau/pen/wvJKVwK Multiple matched elements https://codepen.io/sgorneau/pen/GRWpVKV A timeline contains one or more tweens that have timing controls to dictate when they begin and end on the timeline. The can begin relative to the timeline (at absolute positions .. like 0, 5, 20) , relative to each other ("+=3", "-=2",), or at named labels ("someLable"). You would use a timeline where sequ
    7 points
  18. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
    7 points
  19. 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
  20. My recipe a little trial & error and remove the ****. https://codepen.io/mikeK/pen/VwwwGrd Happy morphing ... Mikel
    7 points
  21. 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
  22. Greensock is incomparable, and I just wanted to say thank you @GreenSock and all parties involved for making this unbelievable product.
    7 points
  23. 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
  24. 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
  25. Hey, A little experiment on how ScrollTrigger and snap could be used. Just for info. Happy tweening ... Mikel
    7 points
  26. 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
  27. 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/e19d77ba54aff075d52b90b3154a2674 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 .
    7 points
  28. 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
  29. 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
  30. 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
  31. I converted Blake's pen to GSAP 3: https://codepen.io/GreenSock/pen/PoNZxqX?editors=0010
    7 points
  32. You may get some use out of insertBefore (some information seen here) like the below two examples. https://codepen.io/osublake/pen/YXoEQe https://codepen.io/GreenSock/pen/yLYJodZ Edit: Sorry @GreenSock, I just looked at your Pen after the fact, which is what you are doing. ☺️
    6 points
  33. Hey @Creativist-Lab You are first setting up your variable paragraph to get the p in each wrap and then you are overwriting that variable, adressing all p in the document with SplitText. What you'd want to do is set up a new variable for your SplitTexts and use that variable you created beforehand to only address the p in that specific wrap. Something like this: let heading = element.querySelector('h2') let paragraph = element.querySelector('p') let splitParagraph = new SplitText(paragraph, {type:"lines"}) https://codepen.io/akapowl/pen/
    6 points
  34. Hey @Rukasu @GreenSock That explanation is taken from this thread, where you'll also find suggestions on how to workaround that. Hope that helps.
    6 points
  35. That demo is really old, and is not meant to be an accurate representation of a timeline. It was for a video just to explain some concepts. Most of the stuff in there is hard coded. Just comment out the all the JS all you will see.
    6 points
  36. @Alex Lopez sure you can do that. I'd recommend going through the ScrollTrigger docs and demos to see how it's done. https://greensock.com/docs/v3/Plugins/ScrollTrigger https://greensock.com/st-demos/ Happy scrolling.
    6 points
  37. The opposite direction maybe? Coming from random values and ended up at predefined values? This is how I'd do it - https://codepen.io/GreenSock/pen/YzZrEPV note, I've updated to new GSAP3 syntax and changed the CDN link too.
    6 points
  38. Glad to see you are enjoying "the fabulous" creative coding club. Not sure how you want to dynamically change the svg artwork but the problem with using an id is that your id is a number. a CSS id can not start with a number or just be a number. try something like circle.setAttribute("id", "circle" + counter++) For changing the colors there are plenty of options. I like stepping through the hsl() hue values to get a nice rainbow effect https://codepen.io/snorkltv/pen/dyvNLpX?editors=1010 using gsap.utils.wrap() you can also s
    6 points
  39. thanks for the tip in the article. looks like 2 scrolltriggers is the way to go. your demo is great and I'm sure it would help. there is already this demo below which covers a lot of ground but as such it's also quite wordy and a lot of stuff happens outside the viewport https://codepen.io/GreenSock/pen/LYVKWGo I love the simplicity and clarity of your demo, especially since you can see the events fire exactly when the markers intersect on the way up and down. 👍 the only change I'd suggest is to space the scroller-start and scrol
    6 points
  40. Welcome to the forum @rimedtades. I'm pretty new here as well and it's a fantastic community. Is this what you're looking for? https://codepen.io/BrianCross/pen/xxqZaNB
    6 points
  41. I *just* added this blog post to the GSAP learning resources. It may help! https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/ Also, I wrote this article on getting values from mouse movement and plugging them into animation https://www.cassie.codes/posts/making-a-lil-me-part-1/
    6 points
  42. Sometimes adding a slight rotation can help with the pixel snapping... and of course adding will-change. gsap.set(".gsap", { rotation: 0.01 })
    6 points
  43. 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
  44. Hey @mr-parrott Would something like this work for you? window.addEventListener("load", () => { function createNew() { let tl = gsap.timeline(); tl.eventCallback("onComplete", createNew); new Anim(tl); console.log(tl) } createNew(); }); https://codepen.io/akapowl/pen/69280b40e98c9947a89e48fe6587563d
    6 points
  45. There would be a few ways to make it happen. An easy choice would be to loop through your words array and animate two at a time like this. https://codepen.io/PointC/pen/jOVEade Hopefully that helps. Happy tweening.
    6 points
  46. Hey @dc65k - welcome to the forums. Your setup is a bit different, so it appears to be working differently. Setting the section containing your slider to 100vh, centering the content within that section, and setting the start of your ScrollTrigger to 'center center', already gives you the effect like on that page you linked to. https://codepen.io/akapowl/pen/8cb2ba6a831a1a380ac4a7069c456a3b If you want the slider items to be explicitly those 200px in height, you'd get quite a bit of whitespace though. For this scenario, pr
    6 points
  47. Making use of some gsap utils. https://codepen.io/osublake/pen/f4218d74342b41f7c984c0cc4ba4ce2b
    6 points
  48. Setting background position... bad. Using transforms... good. https://codepen.io/osublake/pen/393a8cb91527a0d238d626eb134c0ab0 But canvas is probably better... using a packed sprite sheet. https://codepen.io/osublake/pen/KKzgqKr
    6 points
  49. 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
×