Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 09/27/2018 in all areas

  1. That doesn't take ease into account. TweenMax.to(path, 3, { onUpdate: function() { path.style.strokeDashoffset = 1 - this.ratio; } }); But that's not a good way to keep track of a value. var obj = { value: 1 }; TweenMax.to(obj, 3, { value: 0, onUpdate: function() { path.style.strokeDashoffset = obj.value; } }); But why do that when you can tween an attribute? TweenMax.to(path, 3, { attr: { "stroke-dashoffset": 0 } }); The problem you were having is that you were tweening a CSS property. Check out the autoRound section in the CSSPlugin. https://greensock.com/docs/Plugins/CSSPlugin This works as expected. TweenMax.to(path, 3, { strokeDashoffset: 0, autoRound: false });
    3 points
  2. What's your use case? Trying to do that while dragging is really complicated. There is nothing to stop a user from moving their mouse through a "blocked" element. See this demo. It's using a collision detection library with responses, but the dragging is a little wonky because you can move your mouse through blocks, causing your draggable to jump around. That's a demo I quickly modified from this thread. It could be done better, but I don't have the time to rework it.
    3 points
  3. You're setting the strokeDashoffset as a CSS inline style, which has precedence over attributes. So you would need to set the attribute if you want to animate the attribute. TweenMax.set(path, { attr: { "stroke-dashoffset": 1 } }); My personal preference is to use CSS over presentation attributes so I don't run into problems like that.
    2 points
  4. Seems fine using GSAP. As you mentioned, getTotalLength() won't work in IE/Edge so I'd highly recommend the drawSVG plugin for this type of work. It's not only easier, but it works around several browser bugs and inconsistencies. https://greensock.com/drawSVG https://greensock.com/club Happy tweening.
    2 points
  5. No. Finding a tutorial that covers stuff like that is pretty rare. That demo is probably going to be one of the best sources to learn from. Knowing how to work with image data is probably the most important part of that demo, and it has nothing to do with three.js. They are using rgba values of a pixel to create the mesh, much like I'm using rgba values to create particles in this demo. The image data loop in my demo would look like this if I weren't animating it. for (var y = 0; y < height; y += grid) { for (var x = 0; x < width; x += grid) { var i = (y * width + x) * 4; var r = data[i]; var g = data[i + 1]; var b = data[i + 2]; var a = data[i + 3]; var alpha = a / 255; if (!alpha) { continue; } var particle = { color: "rgba(" + r + "," + g + "," + b + "," + alpha + ")", size: size, x: x, y: y }; particles.push(particle); } } If you look at line 100 in that three.js demo, you'll see that they are doing something very similar that. The guy who made that demo also has a post about image data with some three.js demos that are similar to my demo. https://codepen.io/Mamboleoo/post/how-to-convert-an-image-into-particles
    2 points
  6. My preference is to use the DrawSVG plugin so I can get my work done faster and go out for pizza. ?
    1 point
  7. You just want the x and y to always snap to the closest increment of 5 while dragging? If so, then use liveSnap: Remember that "snap" is only for Draggables that have throwProps enabled (it's just for the landing position after releasing, usually with momentum). You can use a function for liveSnap, as I showed in the demo above. Does that help?
    1 point
  8. So, I do not know if the issue is the scrollTo functionality itself or why the angular directive that houses the timeline code continues to run even when the directive itself has been destroyed. However, I found the solution! All i had to do was clear the timeline that invokes the scrollTo functionality in the directive's scope destroy function and all is GOOD! scope.$on('$destroy', function(){ tl.clear(); });
    1 point
  9. The trick with ScrollMagic, a horizontal pin and tweens is using an offset. You can't set the normal triggers, but measuring the height of the window and using that as an offset should work well for you. Happy tweening.
    1 point
  10. Welcome to the forums! I'm not sure I understand your question here, but if you want to make yPercent -20 whenever it's between -20 and 0, you could use ModifiersPlugin like this:
    1 point
  11. You can kill() it if you want. But since you're just creating the same timeline over and over, my personal preference would be to create it once and then play/pause/restart it etc. Also keep in mind that killing a timeline won't automatically reset elements to their starting points. So if you need to animate them again, they may not be where you expect them to be. In this case it works fine because you're using a fromTo() tween on the main timeline for that element. Happy tweening.
    1 point
  12. I've read this through a few times and I'm confused as to the desired behavior. It seems like you have a logo timeline with mouseenter/leave to play/reverse? You also have a banner timeline which should operate independently of the master with a button click? From what I'm reading/understanding, I'm not sure a master timeline is the right choice here since it sounds like each part needs to do its own thing. It may be that I'm missing something though. Can you explain really simply what you want the orange box to do and what you want the green box to do? The way you have those mouseenter/leave events written right now is calling the logoRollover() function and recreating the timeline each time. That's not ideal. You'll usually want to create a timeline once and then play/reverse it on click/hover. Thanks.
    1 point
  13. Just keep learning and practicing. Eventually things just start 'clicking' and that's when it gets really fun.
    1 point
  14. Hi @kbeats You're targeting the whole SVG, but the morph plugin works path to path. You'll need to target the polylines in the SVG. Happy tweening.
    1 point
  15. Hi @jp_uk81 Welcome to the forum and thanks for being a member of Club GreenSock. Since you want the gradient based on user scroll, I think in this case it will be better to create a second scene that animates only the gradient. Then you can focus on each section animation and whatever happens on those timelines without worrying about adding the gradient tween to them. I think something like this should work. If you were using the actual tween duration for the gradient change, then I'd say trigger it at each section. Hopefully that helps. Or at least points you in the right direction. Happy tweening and welcome aboard.
    1 point
  16. Hi @Norixxx If I understand your desired result correctly, I'd probably go with an onComplete call when that 2nd element completes its fade-in on the main timeline. Maybe something like this: Does that help? Happy tweening.
    1 point
  17. Here's a fun little entrance. I'm scaling everything from the same point. You need to open it on Codepen to see the full effect.
    1 point
×
×
  • Create New...