Jump to content

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

OSUblake last won the day on October 13

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Set the state yourself in your return function. setHighlightA(false); setHighlightB(false); setHighlightC(false); setHighlightD(false); And trying to animate a boolean is strange. It's converting them to strings. Something a little simpler. timeLineLength.to(animationData, 1, { onStart() { setHighlightA(true); } }) timeLineLength.to(animationData, 1, { onStart() { setHighlightB(true); } }) timeLineLength.to(animationData, 1, { onStart() { setHighlightC(true); } }) timeLineLength.to(animationData, 1, { onStart() { setHighlightD(true); } })
  2. Changing the scroll position is messing with Draggable. Probably something @GreenSock will need to check out. But I would just use an input range, and style it vertically. Very quick example. https://codepen.io/osublake/pen/98aea4b0fc9545874b686bb1f23257a8
  3. Maybe this will help you out. It's mapping the position of the slider to a scale value, but it's the same concept. You'd just map it to a scroll position. https://codepen.io/osublake/pen/4242b3be53fba428093ba873b7ec07af
  4. That's expected. e.preventDefault(); https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
  5. Why would there be images? You have to add them to your project with the correct path.
  6. What makes you think GSAP is the problem? Do you see any errors in your console? That should be your first step. And is this the correct path? <script src="js/main.js"></script> Go to your codepen demo and click the "export" button in the bottom-right side of the screen. Unzip it, and run the index.html in the dist folder. It should work.
  7. GSAP probably isn't the best library to learn from. It's written in a very optimized way, which adds complexity, and makes it hard to follow. Maybe look at a bare-bones tweening library, like tween.js. https://github.com/tweenjs/tween.js/blob/master/src/Tween.js To learn how easing and tweening works, I would recommend checking out some of the Coding Math videos on YouTube. https://www.youtube.com/user/codingmath/videos Source code for videos: https://github.com/bit101/CodingMath To get started, I would recommend watching: Math mini #1: Normalization Math mini #2: Linear interpolation Math mini #3: Map Episodes 27, 28, 29, 30, 31
  8. Yep. The problem with using type with SVG elements is that the touch-action property has to be set on the root SVG element, so it affects everything. There is no way around that. You can prevent your rect from moving vertically like this. Draggable.create('.rect', { liveSnap: { y: function() { return 0; } } }); Or you can wrap your SVG elements in divs, and create draggables from those divs.
  9. Hey, that looks good! 😀 I was actually going to make another version that was true isometric, but you beat me to it. Although, I was going to try a different approach. Instead of messing around with trig, I was going to use vectors, kind of like here. But what have should be fine, so I probably wouldn't worry about.
  10. No. Good luck with your project. 😀
  11. What errors do you see? I don't see any. You are missing the # for circle1. var boulessl =["circle1","#circle2"]; // bad var boulessl =["#circle1","#circle2"]; // good But it's better to use $refs instead. Using selector strings can cause problems if you use the same component more than once. <svg id="svg" @mouseenter="startAnimeMatter" @mouseleave="stopAnimeMatter"> <circle ref="circle1" cx="40" cy="40" r="20"></circle> <circle ref="circle2" cx="100" cy="40" r="20"></circle> </svg> var boulessl =[this.$refs.circle1, this.$refs.circle2]; This adds a function that gets called when you do this.animeMatter.play(). this.animeMatter.add(animeSphere); You need to use parentheses to call the function, which will add the returned timeline to this.animeMatter. this.animeMatter.add(animeSphere());
  12. Also this: But I would just recommend not using .from() multiple times in a timeline with the same element(s).
  13. Great, now put that in a simplified demo. And try not to use .from() so much. You can't exactly do a from with autoAlpha: 0 if autoAlpha is already at 0. From 0 to 0 is 0.
  14. Sanity checks. methods: { startAnimeMatter() { this.animeMatter.play(); console.log("playing", this.animeMatter.isActive()) }, stopAnimeMatter() { this.animeMatter.pause(); console.log("paused", this.animeMatter.paused()) } }
  15. No, that object doesn't change. You can use the same object for different timelines/animations. https://codepen.io/osublake/pen/f9e7d6adce57ac79600ea3677f7cff8d Your pen wasn't loading any scripts, so that's part of the problem. And your SVG is rather messy, you should clean it up by running it through SVGOMG. A really simple example. https://codepen.io/osublake/pen/375d28629a0e7e7ccafa15cae9301e2a
  16. Correct. GSAP cannot animate the shape for you.
  17. Please don't use code snippets. I can only assume that your code works fine. https://codepen.io/osublake/pen/83c7e1fba5da2f7c43f1c74c7ee36d16
  18. You check if linear is working by rotating a box. Notice how linear rotates at the same speed. https://codepen.io/osublake/pen/ebd9504f755c55fabb4a26a30b31df20
  19. Ha. Yeah, I didn't see that.
  20. I've been noticing problems with the play button on certain pens that use GSDevTools. Clicking on the play button doesn't work all the time, and clicking anywhere on the screen acts as the play button.
  21. Yes, just replace the canvas code in the draw function with the equivalent graphics code for easel.js. https://www.createjs.com/docs/easeljs/classes/Graphics.html Although, I'm not sure if you can set an "evenodd" fill with easel.js. TweenMax.to("#hippo", 2, { morphSVG:{ shape:"#circle", render:draw } }); function draw(rawPath, target) { var l, segment, j, i; ctx.clearRect(0, 0, vw, vh); ctx.beginPath(); for (j = 0; j < rawPath.length; j++) { segment = rawPath[j]; l = segment.length; ctx.moveTo(segment[0], segment[1]); for (i = 2; i < l; i+=6) { ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]); } if (segment.closed) { ctx.closePath(); } } ctx.fill("evenodd"); }
  22. Sure. Unless stated otherwise, everything on CodePen has an MIT license. https://codepen.io/osublake/details/vvRWQd#details-tab-license
  23. Because the angle isn't as steep as it is in true isometric, 116.565 degrees vs 120 degrees. That video talks about the difference starting at around 1:30. A quick fork that allows you adjust the values. I'm not sure I'm not seeing that when I set z1 and z2 to the same value. Do you mean that it should be hidden when z is 0? And what browser are you seeing that in? https://codepen.io/osublake/pen/44a86e5c54ec6d6ad0c85cfe50f4fcf2
  24. A lot of the concepts used in that demo are based on this this video.
  25. Very interesting tutorial! It's hard to say, but I'd guess they'd be about the same since SVG transforms aren't hardware accelerated in most browsers. Here's what I came up with. You can control the start and end points for the x, y, and z axis. It's not true isometric, so the z axis might look a little squished if it's set to 1. https://codepen.io/osublake/pen/JjjdJGz