Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. Hi @Daniel Hult, Welcome to the forum and thanks for joining Club GreenSock. . ScrollMagic isn't a GreenSock product, but I'll answer this for you. You're pinning the .trigger2 div which is a child of the middle section. If you want the next section to wait for the pin, you need to pin the parent section of trigger2. https://codepen.io/PointC/pen/jjqqLX ScrollMagic also has a support area here: https://github.com/janpaepke/ScrollMagic/issues And premium support here: https://support.scrollmagic.io/ Happy tweening and welcome aboard.
  3. Today
  4. Hi! How do I prevent the text at the bottom from overlapping the previous section with the setPin? I thought setPin would stick the current section and not allow other content to scroll over it.
  5. Hi @Gasparo, Maybe this post will help: Using Greensock and other External Scripts in WordPress Have a nice sunday. Mikel
  6. Hello, and thank you so much for help, it's awesome! Do you have any idea how to make the other part with this inscription? How can I add it to a page in Wordpress later?
  7. Hey Jack. Thank you SO much for your help. Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes. Since I have to handle and modify the matrices between applications anyway it works well for my needs and there is no conversion delay. Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path. It was a brilliant piece of code. I didn't troubleshoot any further to root out my issue with it. And Saturday support is WAY unexpected - you guys rock.
  8. Hi @Gasparo, Welcome to the GreenSock Forum. It could be achieved this way ... https://codepen.io/mikeK/pen/LKNVNN Happy tweening ... Mikel
  9. Hi, my dears, I create simple websites using Wordpress. I have a question from a client who is very determined to make a preloader like the one below. https://evagher.com/en/ There is a line, separates the screen into two parts and the word "Eva" appears. I need exactly the same, just another logo and the inscription "Club44". I don't know how to do it technically, I'll put up with the source, but I need your help. Could you tell me how I can do it? Thank you in advance!
  10. Sorry - I mistook current time for effective duration. @GreenSock: Thank you for the formula. Kind regards Mikel
  11. I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/
  12. Yesterday
  13. Hm, is there any chance you could provide a reduced test case in codepen or something? I'd love to see what's going on in-context. No, it doesn't default to any particular direction at all. It just tweens the values normally. So, for example, if you're tweening from rotation:20 to rotation:50, it'd go one direction, but if you're going from rotation:20 to rotation:-10, it'd go the other direction. Again, I'd love to help once I can see a demo. It's just really tough to troubleshoot blind
  14. Are you trying to draw that line? You can use the drawSVG plugin for that. https://greensock.com/drawSVG
  15. Thanks for the response Yes If you have checked the supplied link of Hotel spider I am able to achieve opacity but not able to traverse through svg path I tried but it just disappeared. I am trying to replicate the hotel spider key animation with almost similar effect
  16. Sorry, I don't understand the question. You're animating the opacity and x position which all seem to be working correctly. Is that not the desired result? More details would be helpful. Thanks.
  17. If you're animating groups you need to add a parent group to it and apply the clip-path to the parent. https://codepen.io/PointC/pen/pXgxwm Happy tweening.
  18. Hello Folks, I am learning GSAP and trying to dive deep into GSAP just for the tweaking I am trying to create a key animation from taking inspiration from the given URL :https://www.hotel-spider.com/en Just like that I need to replicate with GSAP. I am trying to do so but not sure where I am going wrong. Here is my try https://codepen.io/patrickjane/pen/rExrdG
  19. That's some amazing magic, but I can't tell if it will work. Its throwing an error at the vars[p] = t[p] line thusly: Uncaught TypeError: Cannot read property 'x' of undefined The element I substituted for both 'element' variables in your usage example is valid - same one I was using before with incorrect rotation. I'm studying what you did to troubleshoot with some difficulty, seems you are executing the matrix transform, grabbing the values, adding the rotation direction, killing the transform, and returning the values. I'm not understanding it well enough to pinpoint the problem though. The logic looks sound though, and I really appreciate your assistance. And yes, I do specialize in the unusual. I'm animating a 20-piece SVG figure using Inkscape to position all the body parts into various poses and then tweening between those. Inkscape SVG outputs matrices and the matrix tweening works fine until there is clockwise rotation defined between matrix pairs. GSAP evidently defaults to counter-clockwise. It looks like your fix would solve that if I can get past the error.
  20. Hi there! I'm really excited about using Greensock, but I'm pretty new to both GSAP and SVG animation. I'm trying to build an animation where one shapes disappears behind an object and the other appears out from the same object. The effect would be one object "transforming" into the other behind an object (the Codepen makes it more clear). I'm trying to use clipPaths to do it, but I can't tell if I'm animating it correctly. It might be an issue with my CSS, I can't tell! The first CodePen attached is what I have so far with the clipPaths. The second linked below is with the clipPaths removed: https://codepen.io/cooganb/pen/vqLLQg Any help would be much appreciated!
  21. Last week
  22. You're dragging a position:fixed image. /* change this */ div.on { position: fixed; bottom: 200px; right: 200px; } /* to this */ div.on { position: absolute; bottom: 200px; right: 200px; } https://codepen.io/PointC/pen/pXgeya
  23. Wow, that's pretty unusual for someone to be feeding in matrix values like that. The problem is that internally those matrices must be decomposed into the various parts like x, y, scaleX, scaleY, rotation, skewX, etc. so that they can be interpolated properly. If you've ever tried tweening the values inside of a matrix, you'll see how weird it looks whenever rotation is involved. For directional rotation to be used, obviously you need to actually define a rotation value (not a matrix). So you need a way of busting apart that matrix. If you don't have your own method for doing that (it can get pretty complex), you could craft a reusable function that piggy-backs on GSAP's capabilities like this: //take a matrix, decompose it into each piece (x, y, scaleX, rotation, etc.) and make sure that rotation has the "_short" suffix to make it go in the shortest direction. The third parameter is optional - it's where you'd define all the other vars values like ease and whatever else you'd normally feed into your tween. function transformVars(element, matrix, vars) { vars = vars || {}; var tween = TweenLite.to(element, 1, {transform:matrix}).progress(1), t = tween.target._gsTransform, props = {x:0, y:0, scaleX:1, scaleY:1, rotation:0, skewX:0}, p; for (p in props) { vars[p] = t[p]; } vars.rotation += "_short"; tween.progress(0).kill(); return vars; } //usage: TweenMax.to(element, 2, transformVars(element, "matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)", {ease:Power2.easeInOut})); Does that help?
  24. You could use a mix of the code in these codepens: https://codepen.io/GreenSock/pen/zcmpo https://codepen.io/GreenSock/pen/uhKIy Happy Tweening!!!
  25. You're welcome. For styles I'm an old fashioned guy and use SASS in separate files. I just don't like styled components. There used to be this concept called "Separations of Concerns" which I still follow to this day. IMHO styles go with styles, pure JS goes with pure JS and React code goes with React code, but again that's just my and my two cents on the subject. If you use breakpoints for animations my advice would be to use the context API and the root component of your app to keep track of the screen size. Like that you can check the screen size when creating/running your animations on every component in the app without the need of passing props down the component tree. Of course if at some point you plan to implement redux you can use it as well to spread the screen size from a single component that listens to the window resize event. The jumpy behaviour could be related to sub-pixel rendering but if you're using x and y that shouldn't be an issue. Perhaps the content your animating is creating the issue, maybe large images with transparency or shadows. Those things normally cause a lot of stress on the rendering engine. This is just on safari? Chrome, Firefox, Edge work OK? Happy Tweening!!
  26. Ha. Yeah, I'm so used to associating React with animating regular DOM elements but you're right - if it's Pixi then no CSSPlugin is needed. @mogwai can you provide a reduced test case so we can take a peek?
  27. Sorry, but I can’t find the codepen, page doesn’t exist. I haven’t FOUC. Maybe my mac too old) I will check on another more powerful computer. Thanks!
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up