Popular Content

Showing content with the highest reputation since 12/19/2018 in all areas

  1. 6 points
    Hi, Besides Jack's great example here is something I made some time ago for a React app: https://codepen.io/rhernando/pen/ebgoNZ Of course it has the constraint that it uses Bootstrap for the styles (the whole project was built on bootstrap and I made a couple of components for it). It's base on this other trying to use GSAP for Materialize's sidebar nav: Hopefully this will be helpful in some fashion. Happy Tweening!!!
  2. 5 points
    Hi, In the last 12 months, I learned some JS / JQUERY. But there is still a long way to go ... At the end of the year a parallable.hitTest to present a little wisdom. Happy tweening in 2019 Mikel
  3. 5 points
    Hi @Tech Nomad Welcome to the forum. If you want to use the morphSVG plugin for this, you need to have a start and end target path for each morph. You can take advantage of loops to make your life easier. Here's a basic example with three paths. You'd just add any ease you like for that effect. You can also give each path a unique ID and loop through like this: The morph plugin is a Club GreenSock perk. More info about that here: https://greensock.com/club Hopefully that gets you started. Happy tweening and welcome aboard.
  4. 5 points
    Hi @Tech Nomad, You can only morph one path (shape) into another - not a bunch of paths into whatever. You could combine shapes, paths - see also this post. Happy morphing ... Mikel
  5. 5 points
    If anybody is interested in learning shaders, here's a good place to start. https://thebookofshaders.com/ Some of the functions available. http://www.shaderific.com/glsl-functions/ And a "simpler" demo to play around with.
  6. 5 points
    Thanks! Here's the pen. And a tweet showing how to make fire with a shader. I'd be willing to bet that this could also be done with SVG filters. https://twitter.com/ciaccodavide/status/964407412634472448
  7. 5 points
    Hi @PinkMeNow, What is your reason to use <symbol> here? Information about <symbol> . You can name this object with the id = "dot" ... Attention: You use the same id 'smalldot' for several objects. Use 'smalldot' as class! More info Happy tweening ... Mikel
  8. 5 points
    I wouldn't worry about GSAP. There's a bunch of optimizations under the hood. Invalidating the tween is the expensive part because it has to recalculate stuff. After that, changing the time would be no different than if the animation where running. And moving the time forward and back is going to happen inside the same frame, so the impact should be minimal. And if somebody is resizing the screen, the browser is already going to be working overtime dealing with layout changes. I don't think anybody expects animations to be running at 60fps when the screen is being resized.
  9. 5 points
    You can do some interesting things by tapping into Ease.map. That's where GSAP stores all the eases. Here's a live easing editor. It was just an experiment, but you should be able to see the potential.
  10. 5 points
    So you're trying to alter an already-created CustomWiggle, right? I assume that's because you're thinking it'd be somehow "cheaper" performance-wise or something? No, it'd need to basically redo everything it does initially anyway (plot the SVG path, feed it to CustomEase, generate the lookup table for super-fast runtime evaluation, etc.) I think you're much better off just creating things dynamically. If you're trying to avoid re-creating one that already exists (like a 52-wiggle version), just check for the existence and if there isn't one, create it. Like here's a simple function: function getWiggle(wiggles) { return CustomEase.get("xWiggle" + wiggles) || CustomWiggle.create("xWiggle" + wiggles, {type:"easeOut", wiggles:wiggles}); } Does that help?
  11. 5 points
    hmm, the video you linked to is for helping people with a very specific and somewhat common scenario of having competing from() tweens on the same properties of the same object. For TimelineLite.set() and TimelineMax.set() immediate render is set to false by default (as long as the start time isn't 0) If a set() is scheduled to run at 4 seconds into the timeline it will not render immediately at a time of 0. The engine is smart enough to know that a set() at 4 seconds should wait until its scheduled time. Please change your demo to use this code: TweenLite.set("#demo", {visibility:"visible"}) // it is important to set immediateRender:false when multiple from()-based tweens are animating the same propreties of the the same object. var immediateRender = true; //switch to true to see the difference var tl = new TimelineLite(); tl.set(".green", {opacity:0}, 0) .set(".green", {opacity:1}, 2) .set(".green", {opacity:0}, 4); You'll see that the green item starts with opacity 0, switches to opacity 1 at 2 seconds and goes invisible again at 4 seconds all as expected. There is no need to change the default value of immediate render on any of those set()s in this situation.
  12. 5 points
    Hi @jonForum If you're using PixiJS, the PixiPlugin can handle all your coloring needs and more. var tl = new TimelineMax({ repeat: -1, yoyo: true }) .to(sprite, 1, { pixi: { tint: "#ff0" }}) .to(sprite, 1, { pixi: { tint: 0x2196F3 }}) .to(sprite, 1, { pixi: { tint: "hsl(180, 90%, 60%)" }}) .to(sprite, 1, { pixi: { tint: "rgb(236, 64, 122)" }});
  13. 4 points
    It will work if the opacity is 1. You should probably start by verifying what the opacity is as a sanity check. I just did. It's not 1. When you click on the overlay, the opacity immediately gets set to 0.
  14. 4 points
    Please provide a simpler demo next time. I have no idea what I'm supposed to be looking at. "from" animations are always a big gotcha for new users. Think about what you're asking. You want to animate something from a certain value. Simple enough, but what value is it going to animate to? Whatever the current value is. If the opacity of an element is at 0, you can't animate from an opacity of 0. That would be going from 0 to 0. Solution 1: Use fromTo animations. This will ensure it will animate to the desired end value. TweenMax.staggerFromTo(".navbar ul li", 1, { opacity: 0, y: 8 }, { ease: Expo.easeInOut delay: 2, opacity: 1, y: 0 }, 0.2) Solution 2: Don't use from animations. I stopped using them years ago for reasons just like this. If I need something to start from a certain value, I'll set it first. TweenMax.set(".navbar ul li", { opacity: 0, y: 8 }); TweenMax.staggerTo(".navbar ul li", 1, { ease: Expo.easeInOut delay: 2, opacity: 1, y: 0 }, 0.2) And speaking of from animations, this is the next problem that you'll probably encounter with them. Either way, it's a good video to watch. https://greensock.com/immediateRender And I'm not trying to say that from animations are bad, or that there is a fundamental problem with them. They do what they are designed to do, but they can be a little tricky when you're first starting out.
  15. 4 points
    Happy New Year @mikel It's a never-ending journey, isn't it? I'm sure we'll all continue to learn cool things in 2019 by hanging around the GreenSock neighborhood. Keep up the great work.
  16. 4 points
    PS I don't think you'd need to morph the weights on the bar unless you plan to distort them a bit. I'd probably group those rectangles and give them a slight rotation and tiny x/y move when the bar bends. Just my two cents worth. Happy tweening.
  17. 4 points
    Hi, It´s fun ... Happy tweening ... Mikel
  18. 4 points
    You're not dragging anything. Look at what the target is here. It's a div that isn't in the DOM. // Drags a proxy element Draggable.create(document.createElement('div'), { }); Please check the docs for .hitTest(), and read about the static version at the bottom. https://greensock.com/docs/Utilities/Draggable/static.hitTest() So you could do this. if (Draggable.hitTest(knob, "#work3", "5px")) { console.log("hitted!") } Not sure what you're trying to achieve, but this looks like it might be easier to do if you just create a draggable with type: "rotation". That will of course only work if your gauge is a semi-circle. It's kind of hard to tell from your demo.
  19. 4 points
    Hi Layne, Welcome to the GreenSock forums. Please read: https://greensock.com/modifiersPlugin The section Carousel Wrap has a demo that should help.
  20. 4 points
    Hi, Here is a live sample of the React component using React Router: https://stackblitz.com/edit/gsap-bootsrap-slide-sidebar I'm going to start creating a re-usable component, but due to other things I'm working on, it might take a while to get it done, but for now that shouldn't be too hard to use. I'll try to set up a public repository with the code and the styles so this can be added to Create React App and it can be customized as needed. Happy Tweening!!!
  21. 4 points
    He intentionally makes his code hard read. You should probably clean it up so you can make better sense of what's going on. Go line by line, and console.log every single value out. I can already tell you that you got Anim wrong. A true/false value never gets set on it. Anim is also inaccessible in your Go method. state = { animating: true } componentWillMount() { const Anim = this.state.animating; } If you need more help 👇
  22. 4 points
    Hi @therddlr, Here is a pen showing how to both the line `y translate` and a reveal (using a parent with overflow hidden). I piggy-backed on jQuery (wrap , unwrap) to make it simple ... but you can find a native way to handle it if you are not using GSAP. Hope this helps!
  23. 4 points
    I'm still a little unsure what the problem is. Can you make a demo? If your images are on top of each other, just move them. bunny.x = 300; bunny.y = 400; // Or use position... // Sets x to 300 and y to 400 bunny.position.set(300, 400); // Sets x and y to 500 bunny.position.set(500);
  24. 4 points
    First of all, welcome to GSAP and the forums! I noticed several things: You're toggling display:block and display:hidden immediately, so your exit animation won't be visible (display:hidden element) The browser won't report an element's width/size properly if it's display:none. That codepen has some very strange things going on with the toggling. Not sure what to make of it, but it seems convoluted. Rather than writing code that depends on a particular class being added/removed for state, I'd recommend using your own "showing" property or something. Is this better? Happy tweening!
  25. 4 points
    Did you check the event and what you're passing into .elementsFromPoint()? event.clientX and event.clientY are undefined on touch events. Please check the documentation for .pointerX and .pointerY properties. https://greensock.com/docs/Utilities/Draggable
  • Newsletter

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

    Sign Up