Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 01/11/2022 in all areas

  1. Bingo! Good job figuring it out. Glad to hear it's all working now. Happy tweening and thanks for being a Club member.
    4 points
  2. Hi all, I make a lot of banners for clients (thanks Gsap !) and making backup gif is always really boring. So, as a former Flash developer, I made a GIF generator, really simple to use and easy to customize. You just have to drag the html file in the window, and it detects the size of the banner if the folder contains the dimensions (like "300x250"). You take snapshots with CTRL key (useful shortcut!) or with the button, and you can adjust the time for each screen. If you have multiple banners with different formats, you can save the timing so that you don't have to re-do it for each. If you don't want GIF, you can also create JPG or PNG. All files created (gif, png, jpg) will be put in the same folder of the banner, named like "300x250.gif". This is an early version of this program, in fact I made this for me to save *A LOT* of time, and I said to myself maybe some other people would like to save time too This is a program for Windows only, because I can not compile for OSX, I don't own a Mac. If someone with Adobe Animate and a Mac can help me, it would be nice. That's it for the moment ! Any comment to improve it is helpful, hope you'll like and use it ! Link to the EXE file : https://zanorg.com/GIFGenerator.zip Here is a screenshot of the app with comments And sorry for english mistakes, I'm french !
    3 points
  3. Hi there @Volt 22 This is definitely achievable using scrollTrigger. Here are some collections that may help you get a broader picture of possibilities and techniques. https://greensock.com/showcase/ https://greensock.com/st-demos/ In terms of structured learning @Carl's creative coding club is a very good way to go! https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484
    3 points
  4. PointC thanks for the quick replys. Ok so that's what i thought as well! i tried it, and well this code is online right now... i don't know if you see the two sections on the url i sent earlier, but what happens is that ony of the draggers you use works just fine. Then, when you scroll to the next one, it looks as the clipPath is updating on both, and right when you move the .... I JUST GOT IT. haha.. the problem was gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` }); has to be let clipper = section.querySelector(".logo-old") gsap.set(clipper, { clipPath: `inset(0px 0px 0px ${x}px)` }); !!! Thanks for all the help!
    3 points
  5. I just meant the x position set() in your matchMedia query. So your original code would look like: gsap.utils.toArray(".section-avant-apres").forEach((section, i) => { let theTarget = section.querySelector(".dragger") if (window.matchMedia("(max-width: 689px)").matches) { gsap.set(theTarget, { x: "50" }); } else { gsap.set(theTarget, { x: "450" }); } Draggable.create(theTarget, { type: "x", bounds: ".logo-new", onDrag: function () { let x = gsap.getProperty(this.target, "x"); gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` }); } }); }); Happy tweening.
    3 points
  6. Offscreen canvas is a technique to improve performance, but you can't use it for everything. The idea is that you draw something on another canvas, and then draw that canvas on your main canvas instead of using a path. Here's an old pen that shows the performance difference. https://codepen.io/osublake/pen/EOeBdm Notice in the draw the method that it will either draw a bitmap i.e. the offscreen screen canvas, or draw a path, which will be slower. The speed improvement happens because I'm using a single bitmap for all the circles, I'm just drawing them at a different size. Think of being kind of like a rubber stamp. It's the same concept that even faster renderers like PixiJS use for sprites. There is an underlying base texture for every sprite, which is the same as an offscreen canvas. So if you need more performance, you might want to check out PixiJS. https://pixijs.com/
    3 points
  7. Hey there! This is a pretty complex demo. It's solving a lot of problems that you don't need solved for your use case. Maybe it would help to start over with a simpler starting point? Something like this? https://codepen.io/GreenSock/pen/RwLeXEL?editors=1010
    2 points
  8. PS You can: //switch this let x = gsap.getProperty(this.target, "x"); //to this let x = this.x; Happy tweening.
    2 points
  9. Looks like you're targeting all elements with the .dragger class in each iteration of the loop. You'll want to target the specific .dragger in each section like this: let yourTarget = section.querySelector(".dragger"); Then set() the target and create a Draggable for the target rather than the .dragger class. Happy tweening.
    2 points
  10. I would suggest creating everything using a normal timeline and ScrollTrigger. Don't get creative with the loading process as it's not even tied to your timeline or ScrollTrigger. Your timeline and ScrollTrigger will work correctly with 0 images loaded. Once you get it working, if you want to defer the loading of images, you can do that in the onEnter and onEnterBack callbacks. Just be careful you don't keep trying to load images after they are loaded.
    2 points
  11. Spoken as a former banner dev - You're doing gods work here. Backup gifs were the bane of my life. Good job @kek
    2 points
  12. Sorry about that, @ncla! I see exactly what you mean and it should be fixed in the next release which you can preview (compressed) at https://assets.codepen.io/16327/gsap-latest-beta.min.js It was related to the "lazy" functionality that defers and groups rendering of .from() values to maximize performance. You can fix it in the current version by simply setting lazy: false on your .from() tween(s). Thanks for reporting this!
    2 points
  13. You can have an offscreen canvas for each of your 4 shapes. The only downside is that your shapes won't have a constant stroke width as you would essentially be scaling an image. It's probably not going to be too noticeable as your shapes are pretty close in size. But if you're just learning than I would suggest trying out the offscreen technique just to get familiar with it.
    1 point
  14. Hey there! I'm afraid canvas isn't really my thing so I can't help here, and as you mentioned this isn't a specifically GSAP related question. I'm sure someone will be able to help out, you just may not get a response immediately (just managing expectations) Nice demo by the way, it looks great.
    1 point
  15. Oh ok I get you, If you're using a loop you can use the index value to work out which section you're entering. boxes.forEach((box, i) => { ScrollTrigger.create({ trigger: box, start: "top bottom", onEnter: () => { initCanvas(box, i) } }); } function initCanvas(box, i) { // get the image(s) you need based in the index value } https://codepen.io/GreenSock/pen/bGomQwp?editors=1011 Hope this helps!
    1 point
  16. Hey there! You're targeting 'section' elements to do the horizontal scroll, but you've got loads of 'section' elements outside of that wrapper. const sections = gsap.utils.toArray("section"); You'll need to be more specific about the elements you're targeting. Your CSS is also not laying the sections out correctly. My advice is always to isolate the issue, fix and then re-integrate. Here's a step in the right direction. ✨ https://codepen.io/GreenSock/pen/jOGevrK?editors=0010
    1 point
  17. Yep, Blake is right - this is totally unrelated to GSAP. It's a browser rendering bug. I believe it has to do with the fact that the browser doesn't handle switching from a 3D to a 2D value, like: transform: translate3d(0px, 0px, 0px); to: transform: translate(0px, 0px); GSAP uses 3D transforms DURING the tween to maximize performance, and then reverts to 2D (when possible) when the animation finishes to maximize rendering clarity (sometimes 3D stuff can look slightly fuzzy). You can set: gsap.config({force3D: false}); To tell GSAP not to use 3D transforms during the tween. That seems to resolve your particular scenario. But again, this isn't a bug with GSAP or anything - it's a browser rendering bug.
    1 point
  18. I just set that in the CSS in my version. It's fine to do either way (via GSAP or CSS). Glad it helped!
    1 point
  19. That document.createElement("div") is just a dummy element that does nothing meaningful. It doesn't wrap anything. It doesn't even get added to the DOM. It's just that Draggable needs an element to drag, but we're using a "trigger" to tell Draggable to add its touchstart/pointerdown/mousedown listeners to the ".demoWrapper" instead. I just updated the demo with some notes and I set allowNativeTouchScrolling: true and set the trigger to be the .demoWrapper: https://codepen.io/GreenSock/pen/RwLepdQ?editors=0010 Better?
    1 point
  20. Alright, you got me curious and I love a challenge, so I whipped up a draggable demo that even uses inertia and is configurable: https://codepen.io/GreenSock/pen/RwLepdQ?editors=0010 Is that kinda what you were looking for?
    1 point
  21. I did, thanks! its not as smooth as i wanted but its super close, thank you very much!
    1 point
  22. You can use keywords like 'left' and 'right' to specify the start position of the trigger. So in your case you'd need it to start when the right hand side of the element hits the left hand side of your scroller. https://codepen.io/GreenSock/pen/XWexMzW?editors=0010
    1 point
  23. Hi @Matt K. Thanks for being a Club GreenSock member! We can't really provide "build-to-order" solutions here, but we're happy to answer any GSAP-specific questions. Here's a fork of your demo that does what I assume you wanted in terms of positioning: https://codepen.io/GreenSock/pen/MWEPpwZ?editors=0010 Grabbing and dragging is a whole different challenge. Again, we just don't have the resources to build custom solutions for all the questions that get posted in these forums, but you should certainly be able to use Draggable to make the whole thing draggable, though you'll likely need to use a proxy element for that because you're dealing with 3D space/rotation rather than 2D x/y dragging.
    1 point
  24. In case anyone finds this looking for a solution, here's a couple things I ended up figuring out, partly based on the responses linked above: It seems to make some difference whether the SVG element has a viewbox attribute, and whether the SVG element itself has sizes set on it via CSS. In the CodePen example above, it works in Safari if I remove the viewBox and set width & height of the SVG both to 100% in CSS. In my own project, this sometimes made a difference and sometimes not, depending on what else I adjusted. Not quite sure of the particulars but worth it to play around with if you are dealing with this issue! The trick described here of adding a 1px <rect> into the <clipPath> element almost worked. It did work in the CodePen example I set up. In my own project, this made the issues better but still didn't really solve it. I'm clipping both images and text etc in that project, and sometimes the images have to be transformed/scaled as well, so maybe there was just too much going on for this trick to be effective. Adding an onUpdate function to force re-rendering on update, as described here, totally works. For performance reasons it's obviously not my favorite solution, but after hours of pulling my hair out over this I'm happy with it!
    1 point
  25. You'd have to check and see if the width is greater than the width of your container. Here's a demo showing how get Draggable and ScrollTrigger to work together. https://codepen.io/GreenSock/pen/ZELQqeJ
    1 point
  26. I doubt it has anything to do with GSAP as the properties are correct when you inspect the element. Adding will-change to the CSS seems to have fixed the issue. p { background: forestgreen; display: inline-block; padding: 1em; margin: 0; border-bottom: 1px solid darkgray; will-change: transform, opacity; }
    1 point
  27. this is a demo that accompanies one of the lessons from courses, perhaps it will help https://codepen.io/snorkltv/full/PomzGPN
    1 point
  28. The fact that the file is 94mb is certainly the problem. That's pretty huge. We can't really advise on how to make Lottie files smaller but maybe the folks in the Lottie forums will be able to help. https://forum.lottiefiles.com/ Good luck!
    1 point
  29. Hey there! Are you looking for something like this? Using a timeline is a good way to create sequenced animations. Hope this helps. https://codepen.io/GreenSock/pen/NWaLNpq?editors=0010
    1 point
  30. I have a few different tricks. Usually the bulk of the time for me is spent getting all the assets exported. In Photoshop I use file/generate/image assets. From AI it is a bit more challenging. I organize the AI files layers, creating seperate layers for the things that move, and then name the layers and use a script to export all layers using the layer name as the file name. jsx file is called MultiExporter. I use the CSS panel in Illustrator to position things, this is also a huge timesaver. I use variables in the CSS too to define background sizes etc... So I only have to put the numbers in once.
    1 point
  31. Oh, I just saw this url because your URL wasn't linked correctly. https://test-blsvyu36l-rootandleaves.vercel.app/ I didn't even see the other link, but it's way too hard to even tell what your performance problems are related to. I would try to isolate the problem first, like remove ScrollTrigger, and then start with other animations until you find what's killing the performance. If you need smooth scrolling, I would look at some of our demos in the scrollerProxy docs. The native ScrollTrigger demo works fine with syncing with three.js. Ignore all the Assscroll stuff in this demo... https://codepen.io/ashthornton/pen/874833fdebc032bedd0cf61e9eac3ee9 That was taken from this post.
    1 point
  32. Hi there dotsinspace. This is pretty vague I'm afraid. We don't know what you're doing as there's no demo attached so we can't really advise. There are no three.js/GSAP issues that we're aware of. There's a lot of examples of non-jerky animations in this collection, maybe something here will help. https://codepen.io/collection/DpQWdN?cursor=ZD0wJm89MCZwPTEmdj04
    1 point
×