Popular Content

Showing content with the highest reputation since 09/19/2018 in Posts

  1. 7 points
    You were passing timeline as a string with single quotes instead of actual timeline.
  2. 7 points
    You can create a single function that handles your tweens. It will also reduce the number of tweens you have to manage.
  3. 6 points
    You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.
  4. 6 points
    It's really bad on Windows 10 for me. It's some kind of graphics/GPU issue. You should probably file a bug. I got it working better by rotating the SVG instead of the path, and adding will-change to the CSS, but I still see artifacts on my computer depending on the number rays. 59 and 60 always have rendering issues on my computer.
  5. 6 points
    I'm assuming you just want a seamless rectangle? That should get you started. Happy tweening.
  6. 6 points
    Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.
  7. 6 points
    If you use the cycle property, you can define some clever way to select your desired elements using a function and adding a delay to each instead of using the staggerFrom/To own stagger:
  8. 6 points
    Working with 50 timelines wouldn't be hard. I think the problem you might be having is wrapping your head around "this", and that's not uncommon. Everybody struggles with "this", and I do mean everybody. You should look at what "this" is in your component. Vue creates a flattened object from your component code. console.dir(this); You're not calling the allAnims method. A call will have parenthesis after it. It might help if you view your methods without the ES6 syntax. Methods are functions, and you can't add a dot (chaining) after calling a function unless something is returned. Adding your animations to "this" allows you to access them from other methods. methods: { allAnims: function(refs) { this.logoAnimation = refs.Logo.animateLogo().pause(); }, play: function() { this.logoAnimation.play(); }, reverse: function() { this.logoAnimation.reverse(); } }, mounted: function() { this.allAnims(this.$refs); // WORKS this.play(); } https://codesandbox.io/s/3vrnv37rvm
  9. 6 points
    I love a challenge, so I took a crack at it here: Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. Does that help?
  10. 6 points
    Welcome to to the forum. Your timelines have already played so an easy fix is to play(0) like this: $("#blue").click(function(){ Anim3.play(0) }) ; $("#red").click(function(){ Anim4.play(0) }) ; Happy tweening.
  11. 6 points
    Here's a tip. Don't position stuff you're going to move where you initially want it. If you drew your tile at 0,0 or centered on 0,0 you could easily move it to a coordinate on your polyline without any issues.
  12. 6 points
    Hi and welcome to the GreenSock forums, The easiest way to get something to follow a polyline would be to use MorphSVG to convert your path data from your polyline to an array of points and then pass those points to the BezierPlugin as explained here: https://greensock.com/path-animation I made a demo showing how that would work var path = MorphSVGPlugin.pathDataToBezier("#route", {align:"#tile"}); console.log(path); TweenMax.set("#tile", {xPercent:-50, yPercent:-50});// center tile on path TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}) If you want to use MorphSVG you can upgrade your membership to a Shockingly Green via your account dashboard /// If you want to manually translate the coordinates of your #tile so that you can animate to coordinates on your line please read this post (especially blake's final demo) You'll see that each chicken animates from the center of the box.
  13. 6 points
    By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.
  14. 5 points
    This might be a bit tricky. Just so we understand the desired result here. You want the tile to change color as it starts traveling each new segment and that new color is based on the direction of travel? The user is allowed to click multiple times to rapidly advance through each segment? I would also assume you want an immediate color change if the user clicks in the middle of a section to reverse the direction of travel? I'm not sure the progress() method is gonna be best here. It might be better to tween to the polyline points and call a function to check the direction of travel and whether it's a north/south or east/west segment. Blake may jump in with something amazing, but I'd have to think about this one a bit.
  15. 5 points
    I think you see some oddness there because you have divs that aren't closed. You started your container and test divs, but didn't close them. On line 28 you started a new div, but I'm assuming that should have been a closing tag for the test div?
  16. 5 points
    GSAP doesn't do any rendering. It changes values over time. If the value gets correctly set, which it does, then it's not related to GSAP. I think the problem is that you're asking the browser to do too much. Mobile devices are pretty limited when it comes to performance. I'm on a workstation and your animation causes a massive drop in performance during the first couple of seconds, and the layers keep on changing until rotation is the only thing being animated. When you animate something other than transforms, opacity, or a filter, the current raster of the content has to be destroyed, recalculated, rasterized, and uploaded to the GPU, which is slow. left and top are the biggest problems here. z-index is questionable. scale is a transform, but it's also questionable because it causes a repaint if you don't use will-change in certain browsers. {left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'} And filters can be slow due to stacking contexts. https://developers.google.com/web/updates/2017/10/animated-blur I would first try switching left and top with x and y, and setting will-change in your CSS. .spaceship { will-change: transform, filter; } Just be aware that will-change can cause problems, and scaling might not look good. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ If you still have problems, you should look into using canvas.
  17. 5 points
    Sorry, the current SVG spec doesn't allow 3D transforms on child elements. SVG 2.0 probably will. For now you can rotate the whole SVG all you want. Hopefully that helps. Happy tweening.
  18. 5 points
    Nice find! Let me tell you about "that". Before arrow functions came along, using "this" was very error prone. "this" inside an inner function is the wrong "this", which is very easy to overlook. var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { this.colors.forEach(function(color) { this.logValue(color); // ERROR }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff(); To fix it you would have to put "this" in a variable. I would always name it "that", resulting in code that confused everybody. Q. What's that? A. this. Q. What?!? A. It's this! Q. I don't know what that is! var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { var that = this; this.colors.forEach(function(color) { that.logValue(color); // WORKS }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff();
  19. 5 points
    .getTotalLength() for other shapes like a polyline is part of SVG 2. https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength And Microsoft is like, meh... it can wait. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svg2/?q=svg I totally forgot about this. You can get the length using the DrawSVGPlugin. var totalLength = DrawSVGPlugin.getLength(polyline);
  20. 5 points
    You can make it work with the progress() method and no labels. All you need to do is measure each segment and divide that by the totalLength() of the polyline. Push those results into an array and you'll have a progress stop for each point. I forked my pen from above and changed the path to a polyline. How about something like this? Hopefully that helps. Happy tweening.
  21. 5 points
    Hi, You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable. Just add dragClickables: true in your Draggable instance and it will work: export default class App extends React.Component { componentDidMount() { this.draggable = new Draggable(this.draggableRef, { type: "x,y", dragClickables: True }); } render() { return ( <div ref={ref => {this.draggableRef = ref;}} style={{width: 100, height: 100, background: "#f00"}} /> ); } } Another alternative is roll-back to React 16.4.2 For more details and information about this issue, please refer to this post: And this issue in React's repo: https://github.com/facebook/react/issues/13654 The next release of GSAP will have this fixed. Happy Tweening!!!
  22. 5 points
    If you name that tween, you'll be good to go. var tween = TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}); $("#pause").click(function() { tween.pause(0); }); Happy tweening.
  23. 5 points
    Hi @Robert Wildling I believe the negative value is the way to go. Similar recent question here and Jack's answer was a negative stagger value. Happy tweening.
  24. 5 points
    If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.
  25. 5 points
    Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance. https://developers.google.com/web/updates/2017/10/animated-blur
  • Newsletter

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

    Sign Up