Jump to content
GreenSock

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

Leaderboard

  1. PointC

    PointC

    Moderators


    • Points

      403

    • Content Count

      4,326


  2. GreenSock

    GreenSock

    Administrators


    • Points

      364

    • Content Count

      16,411


  3. akapowl

    akapowl

    Moderators


    • Points

      320

    • Content Count

      834


  4. Cassie

    Cassie

    Administrators


    • Points

      256

    • Content Count

      111


Popular Content

Showing content with the highest reputation since 03/23/2021 in all areas

  1. 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
  2. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
    7 points
  3. 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
  4. My recipe a little trial & error and remove the ****. https://codepen.io/mikeK/pen/VwwwGrd Happy morphing ... Mikel
    7 points
  5. 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
  6. 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
  7. 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
  8. Seems like a good use case for registerEffect! ✨ docs here - https://greensock.com/docs/v3/GSAP/gsap.registerEffect() https://codepen.io/cassie-codes/pen/ab220568ec98f4a94ac2eaad6dc3eef6?editors=1010
    6 points
  9. Hey @Jakebogan For those types of animations I use the puppet warp tool in AI and usually get decent results with MorphSVG. It's all in how you set up the assets. Here's a really quick demo. https://codepen.io/PointC/pen/gOgGQrP Hopefully that gives you some ideas. Happy tweening.
    6 points
  10. Hi and welcome to the GreenSock forums. As far as I know, once you add an infinite instance inside a timeline that timeline's duration becomes infinite as well. As much as @GreenSock has spent many hours bending the construct of time-space (for example you can pass a negative time to a GSAP instance), I'm afraid He hasn't gone that far, yet. We have a new admin in the house that might be able to crack that In a serious note now, what you can do is add a label in a certain position and get that label's time, like that you'll have a notion of the duration of the timeline
    6 points
  11. 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
  12. 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
  13. I call this the Nesting Doll Timeline Technique: https://codepen.io/ryan_labar/pen/PoWxveg
    5 points
  14. I'd just do a recursive function call to reorder the cards and start again. Simple example.... https://codepen.io/osublake/pen/a5d8def52e58227c738898c4d01e774e
    5 points
  15. Throw in a radius animation, and then you can change how big the circle is. The allows for the height of the wave to be dynamic. For example, it can start out small, and then get bigger, or vice versa. https://codepen.io/osublake/pen/edbed4a5ee29e65a49cc60f9868e7d7b
    5 points
  16. This is the basis for a wave. Try playing with different values here... var delay = norm * 1.5; tl.to(obj, { angle: Math.PI * 2, ease: "power2.inOut", duration: 3 }, delay); https://codepen.io/osublake/pen/eb9ad45d903c076f2c47ee1ea3981b2a
    5 points
  17. Ahaha! I forgot about that one. ✨ *peers cautiously at the code*
    5 points
  18. You could maybe update this older example by @Cassie to GSAP 3 as a possible starting point to work from. 😉 https://codepen.io/cassie-codes/pen/bzXLOr
    5 points
  19. In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. For example, trying to animate from this: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); to this: clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%) wasn't working, but when I changed the zero values to percentages, it worked perfectly. // From clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) // To clip-path: polygon(-100% 0%, -100% 0%, -100%
    5 points
  20. I've had thousands of timelines running at the same time without issue (with WebGL). As @Cassie said, it's more about what you having the timeline do. If you're animating font sizes, width, and height is probably going to have a greater impact on performance than animating transforms and opacity.
    5 points
  21. Hi Paul! It seems to be firing ok for me - however you've got a lot of unnecessary code here. If you loop through all the sections you can then access the index of that section and use that index value to change out the src. https://codepen.io/cassie-codes/pen/a5afedb1be5eced5ffacc61ec147e9db?editors=1011 You also don't need to work out the height of the sections yourself! GSAP can do that for you. I've added a container around the section elements - If you define this container as the trigger element you can pin the tooltip until the bottom of the sections hit the bott
    5 points
  22. Hi Christian! For the accordion - this might be a cleaner solution. Opening each section one by one in a timeline and pinning the container while it plays out. https://codepen.io/cassie-codes/pen/a8f3c627b4d152fd68bb4055c5a9af68?editors=0010 You can 'snap' to certain sections in the animation but ScrollTrigger doesn't do any scroll jacking. iIt's a bit of a usability nightmare and it's very error-prone. You can read more here about snapping and scroll-jacking - https://greensock.com/docs/v3/Plugins/ScrollTrigger No scroll-jacking, so it can be combined with native technologi
    5 points
  23. Hey @eduardfossas, Welcome to the GreenSock Forum. I'm not sure what exactly you want to achieve. Sometimes a special ease for entire timeline helps - so tween the timeline ... https://codepen.io/mikeK/pen/RwNKBrB By the way: You are still using the old GSAP syntax. Happy tweening ... Mikel
    5 points
  24. Hey @zofia, Maybe this could be a way https://codepen.io/mikeK/pen/qBRxdEa Happy tweening ... Mikel
    5 points
  25. Welome to the forum @iCodeAyush There recently has been a thread about that same effect. Maybe the example by tailbreezy can give you another idea how to get it working in combination with what Cassie mentioned above about the images that will need to be hidden. Happy tweening.
    5 points
  26. Hi there! This looks great, good job. 🙂 I checked out the website and most images are disappearing offscreen, but for the ones that need to be hidden - you can change opacity after the image has resized by adding another tween to the timeline Tweens added to a timeline follow one after the other, so you could do something like this. LandingPageScrollTrigger.to('#wrapper #img7', { transform: 'scale(1.4)', x: "15%" }, 0) LandingPageScrollTrigger.set('#wrapper #img7', { opacity: 0 }) Or if you wanted more control over the time you could use a position paramet
    5 points
  27. I had to make it good. It's my Pixi comeback special. I haven't touched it in like over 6 months.
    5 points
  28. Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with. if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line). You would then attach a ScrollTrigger to the timeline https://codepen.io/snorkltv/pen/oNBGzOE?editors=0010 If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.
    5 points
  29. Sorry, but there isn't much I can do with the sample you provide since there isn't a way to tinker with the code. You can create a sample in codepen using jQuery ajax and get some dumy images from unsplash: $.ajax({ url: "https://images.unsplash.com/photo-1548366086-7f1b76106622?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=624&q=80", crossDomain: true }).done(function(){ console.log("DONE!!!!"); }); I just tested that code in codepen and I don't get any errors.
    5 points
  30. Ok pal! I've simplified this down a lot for demo purposes. 1) You were trying to animate rectangles within clip paths. I assume you wanted to target and animate the actual elements themselves? This is why stuff was disappearing (the clipping area was moving). I've removed the c lip paths as they didn't seem to be having any other effect. Apologies if you were intending to use the clip paths in some way and I've misread this. 2) Tidy tidy tidy - There is so much going on - Inline styles, styles in CSS, styles as presentation attributes, inline transforms, base 64 stuff, unused clip paths,
    5 points
  31. I am loving this so far. I have limited time per day but what I have been able to soak in is amazing to me. I can't wait to keep upping my animations game one day at a time. Thanks for being here! https://jnutt367.github.io/gsap3/ This is the first thing I built with gsap. Hopefully more and better to come...
    5 points
  32. Hi Alex, You're right about the padding! By default, when you pin an element, padding gets added to push other elements down so that when it gets unpinned, the rest of the content flows in nicely. Your CSS is set up perfectly - I think the confusion comes in where you have two separate scroll-triggers unnecessarily. Here's a little example that (i think) does what you want? https://codepen.io/cassie-codes/pen/c49f9997ea9ec4b9b9d8dde1b444d16e
    5 points
  33. Hey @Bogomip The first parameter in your start always refers to your trigger-element; the second refers to the viewport; 'top top' meaning when the top of the trigger hits the top of the viewport. So when you need to calculate distances like in your example, you want to make sure that you calculate them from the same point. I changed all your 'top bottom' to 'top top' to keep the measurement consistant there. Also, for your first ScrollTrigger that does the pinning you'd want to use the div with the class of panel-one inside of that header-wrap as the trigge
    5 points
  34. Sorry, but I have no way of knowing what could be wrong. If your target isn't found my only guess is you are running your scripts before the DOM is present. Try loading your js at the bottom of the page in this order gsap scrolltrigger your custom animation code that you wrote
    5 points
  35. @Verdandi That is just a canvas rendering technique. The canvas isn't being cleared, so all the old pixels remain. On every render, it's drawing a slightly transparent black box over all the old pixels, creating a "trail" effect. When you set the fade to rgb(0,0,0), it's just drawing an opaque black box over all the old pixels, which has the same effect as clearing the canvas. // this is pretty much the same... context.fillStyle = "rgb(0,0,0)"; context.fillRect(0, 0, vw, vh); // ...as doing this context.clearRect(0, 0, vw, vh); Check out this thread. I g
    5 points
  36. Hi and welcome to the GreenSock forums. Sorry but your question is a little bit vague. What I can infer from the little information you're providing, perhaps the MorphSVG Plugin is what you're after: Check out the samples in there and the docs to see how it works: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin This is a Club GreenSock benefit, but if you want to take it for a test drive, you can use this codepen in order to play around with it: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!!!
    5 points
  37. And now I've gone even further down the 3D cube rabbit hole –made a Draggable version: https://codepen.io/creativeocean/pen/poRyMLX?editors=0010
    5 points
  38. Hello @cr33ksid3 You can set the point you want to rotate your orbit-groups around inside your SVG in GSAP via svgOrigin - since you want to rotate them around the center of your SVG and your SVG is 800x800 that would be a svgOrigin of ' 400 400'. Then you'd have to think about what would be neccessary for the square/rect itself to remain in position during that rotation of the whole group - and that would be to rotate it in the opposite direction for the same amount of time around it's own center, countering the overall rotation. To set the rotation around its own center you'd wan
    5 points
  39. Hey @cr33ksid3, Its still the old GSAP syntax but a funny hint how to rotate 'planets'. https://codepen.io/mikeK/pen/xxbrKKQ?editors=1010 Happy rotating ... Mikel
    5 points
  40. You could use ScrollTrigger.matchMedia() for that. https://codepen.io/GreenSock/pen/e2d1d9084b18a67f9c90da7ea29a1509?editors=0010 I'm not sure what you need to do for LocomotiveScroll (if anything), but the CodePen above at least shows how you can handle the GSAP/ScrollTrigger stuff.
    5 points
  41. Hello @seanom Using a timeline certainly is the best way to approach this - but with your approach you are actually making one of the most common ScrollTrigger mistakes; nesting ScrollTriggers inside multiple timeline-tweens. You'd want to avoid that and instead set up the scrollTrigger on the timeline itself. You can use the position parameter of the timeline (more info on that right below the video on the linked docs-page) to properly adjust the timing for the individual tweens of yout timeline. But be aware, that durations and the position parameter on Scro
    5 points
  42. Hey @Jase For it to work with a smooth-scrolling library, you will first and foremost have to set the scroller appropriately on your ScrollTrigger. Using smooth-scrolling libraries will most likely have some caveats when it comes to layout/positioning things the right way - most often simply just related to how they handle the 'scrolling' - so the issue is not ScrollTrigger-related in the first place. I got the demo running with loco-scroll by additionaly to setting the scroller to the ScrollTrigger, removing the position: absolute, top and left from the #co
    5 points
  43. this seemed like an interesting challenge. hopefully the following will spark some ideas to help you get it to the finish line. First, it's important to note that GSAP has loads of API hooks and utilities to make seemingly complex effects fairly easy without doing any tough math. By using gsap.utils.distribute() and staggering from center you get stuff like https://codepen.io/snorkltv/pen/yLyqVWQ Rubberbander lesson from GSAP 3 Beyond the Basics Being that you are very particular about the middle letter staying in center and all the other le
    5 points
  44. The below codepen example from the ScrollTrigger Demos should help you based upon your description. https://codepen.io/GreenSock/pen/BaowPwo If not, you can find many other pinning examples and discussions throughout the forum.
    5 points
  45. I whipped together a helper function that was loosely inspired by Chris's work there, and it has the following tweaks: Improved performance in the way it handles scrubbing You can add any ScrollTrigger-related value to the object you pass in (trigger, start, end, onEnter, onLeave, onUpdate, markers, whatever.) so you get tons of flexibility https://greensock.com/docs/v3/HelperFunctions#lottie https://codepen.io/GreenSock/pen/QWdjEbx?editors=0010 👍
    5 points
  46. There are a few different ways, it boils down to what you are supporting and how your project is setup. The "modern" way of prevent the parse-blocking is to add `defer` to the <script> tag (or the `async` one). <script defer src="blah.js"></script> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script The old skool way is to have only a tiny, tiny script at the bottom of your body tag that runs only after the `DOMContentLoaded` and the `load` events have fired. This tiny script then adds the <script> tags to all of the rest of your J
    5 points
  47. thanks for the demo. there was an error saying ScollTrigger.scrollerProxy() was not a function. That is because you were using an old version. scrollerProxy() was added in 3.4. you also omitted the scroller property when you created a ScrollTrigger for each video. in order for the video to play on scroll without any prior user interaction it needs a muted property. I added this for you. https://codepen.io/snorkltv/pen/ExZjexm?editors=1010
    5 points
  48. Okay I think I understand. You want the dashed path to change color as the user progresses through the stop points, right? I think I'd create my base dashed path and a duplicate in a different color. The duplicate could then be masked and revealed with DrawSVG. Maybe something like this. https://codepen.io/PointC/pen/PoWwOLg I just did a copy and manual paste for each path in this demo, but the d attribute is the same so you could tighten this up a bit more by cloning the base path or just setting the d attribute. Hopefully this is what you meant and I'm not
    5 points
×