Jump to content

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

OSUblake last won the day on March 28

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    Circular motion

    It's a little redundant having two move commands in a row (M m). `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z`
  2. So add points using that helper (alt + click), copy the path data, and then put the path data inside the d="" quotes. <path id="red-piece" fill="#ff39aa" d="" /> Now move the those points to the melted position, copy the path data, and insert it in thed="" quotes. <path id="red-piece-melted" fill="#ff39aa" d="" />
  3. I would do it by hand. Jack's demo is using the MotionPathHelper. https://greensock.com/docs/v3/Plugins/MotionPathHelper You can use that to edit add/edit points and copy the new path data. https://codepen.io/GreenSock/pen/oNNEdRV
  4. First, just importgsap. There is no need to import TweenMax or eases. https://greensock.com/docs/v3/Installation https://greensock.com/docs/v3/Eases If you can't get it working in CodePen, use stackblitz or codesandbox. You need to put them in an array. Something like this, but I didn't test it. import React, {useRef, useEffect} from 'react'; import styled from 'styled-components'; import {gsap} from 'gsap'; const Header = styled.h1` text-align: center; color: palevioletred; `; const Circle = styled.div` position: relative; // top: 50%; // left: 50%; height: 250px; width: 250px; border: 1px solid palevioletred; border-radius: 50%; `; const CircleContainer = styled.div` background-color: #777; `; const CircleOne = styled(Circle) ` z-index: 500; position: absolute; top: 50%; left: 50%; `; const CircleTwo = styled(Circle)` z-index: 600; position: absolute; top: 50%; left: 50%; `; const CircleThree = styled(Circle)` z-index: 700; position: absolute; top: 50%; left: 50%; `; const CircleFour = styled(Circle)` z-index: 800; position: absolute; top: 50%; left: 50%; `; function App() { let circle1 = useRef(); let circle2 = useRef(); let circle3 = useRef(); let circle4 = useRef(); let textItem = useRef(null); useEffect(() => { const circles = [ circle1.current, circle2.current, circle3.current, circle4.current ]; gsap.to( circles, { duration: 1.5, opacity: 1, transformOrigin: 'center', rotate: 360, y: 50, ease: "boumce.out" } ); gsap.to( textItem.current, { duration: 1.5, opacity: 1, rotate: 360, x: 100, ease: "bounce.out" } ) }, []); return ( <div className="App"> <Header ref={textItem}>GSAP Animations</Header> <CircleContainer> <CircleOne ref={circle1}></CircleOne> <CircleTwo ref={circle2}></CircleTwo> <CircleThree ref={circle3}></CircleThree> <CircleFour ref={circle4}></CircleFour> </CircleContainer> </div> ); } export default App;
  5. I would second everything Ivan said. It's really hard to estimate how well each medium (WebGL, canvas2D, SVG) will perform for animating graphics like that. I'm pretty sure canvas2d will be faster than SVG, but it's not the easiest thing to work with. Will Pixi be faster than canvas2D for an animation like that? I honestly don't know, but it will be much easier to create in Pixi.
  6. Hm. Maybe try restarting your editor. And maybe try deleting your node_modules folder and doing a clean install. If that doesn't help, make a simple repo showing the problem. It's very hard to troubleshoot local build problems.
  7. Like Jack said, make sure you uninstall @types/gsap. You don't need to import TweenLite/TweenMax, TimelineLite/TimelineMax, or any eases. Everything can now be done with the gsap object. Also, installation docs. https://greensock.com/docs/v3/Installation
  8. OSUblake


    You could just animate the rotation. It's hard figuring out an exact transform origin on your image, but something like this. https://codepen.io/osublake/pen/009d53625978e660b93a7265cfc0f826
  9. And after reading your reply, I guess you're trying to do something similar to this? One problem with using the modifiers plugin for points is that calculations have to be done in separate x and y functions. I think it would be easier to do all the calculations in an onUpdate or ticker for any elements that have moved.
  10. That wasn't my intent. I was genuinely trying to help you. Those demos show how you can speed up drawing lines using SVGPoints as it might require less updating i.e. setting attributes. That was not clear to me in your original post. You just showed that spring demo. The way I set those up is with the modifiers plugin is to run infinitely. The only reason I did that was to demonstrate how the modifiers plugin works. Normally I would have just used a ticker to animate something like that.
  11. Why are you trying to optimize it? JavaScript is fast. SVG is slow. That's really not how it works. The line redraws at the end of all your updates. That said, I like using SVGPoints with polylines/polylines instead of updating a <line>. Move your mouse around. https://codepen.io/osublake/pen/c199810fd80ff33d1cf34f67dfa275aa Points can be animated too. https://codepen.io/osublake/pen/yakOjY Doesn't sound hacky, but why not just updated everything inside a single onUpdate? Not sure why are you using the modifiers plugin based on your description? A demo might help to understand your problem better.
  12. Use media queries for media queries, not resize events. An oldie using jQuery, but not necessary. https://codepen.io/osublake/pen/vExQEy This has resize events, but for a different reason. The background color changes on media changes. https://codepen.io/osublake/pen/jLLqbY
  13. Ha... noted. I def don't care about any version IE. Do you have a demo of that? I'm genuinely interested in seeing the difference.
  14. Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! 😉 Yes, that changed with v3.... You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function. https://greensock.com/docs/v3/GSAP/gsap.getProperty() And check out the Reusable getter function at the bottom. It will cache the target to improve performance. var getter = gsap.getProperty(inputHandle); var x = getter("x"); var y = getter("y") If you need more help, just let me know.
  15. I just copied and pasted that part from CSS tricks... the box sizing part. https://css-tricks.com/box-sizing/ But serious question. What's the difference? I don't think I truly understand the difference. How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times. Just kidding. I honestly don't know how many times, but it hasn't been a lot. I like using relative for all elements because, well basically that's what you really want. Without it, you have to debug why setting left, top, and z-index don't work. It gets even crazier when you throw in stacking contexts. I learned about this relative tip from David Khourshid. He does some pretty amazing work. https://codepen.io/davidkpiano/pens/popular
  16. Can you make a demo of that? I'm thinking that for this to work, you would need to animate a "container" element with a motion path, and then influence the position of a child element with your mouse movement logic.
  17. I feel your pain! I've been stumped by that problem more times than I can count, but I've learned my lesson. Whenever I start on a project, the first thing I do is add this to my CSS. *, *:before, *:after { box-sizing: border-box; position: relative; } Trust me, it's a lifesaver.
  18. I don't see any problems, but if you need to do a hard refresh to see the problem, that probably means you need to wait for images and other assets to load.
  19. Another bad thing about CSS is that it's hard control with transforms. Take a polygon clip-path and try to scale and rotate it from the center. It's doable, but it won't be fun.
  20. Looks pretty good to me. It's supported in all modern browsers. But what about IE? IE usage is skewed because of a South Korean law.
  21. CSS support for clip-path is meh. It really needs support for path(). https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility I think CSS will be better option in the future. With SVG, you have to create an new <clip-path> element for each instance. Meaning, if you want to apply the same clip path animation to 4 different elements, but at different times, then you will need to create 4 <clip-path> elements.
  22. That's not valid JavaScript. You can use backticks for multi-line strings. const shadow = `0 1px 0 hsl(43, 35%, 47%), 0 2px 0 hsl(43, 35%, 40%), 0 3px 0 hsl(44, 35%, 35%), 0 4px 0 hsl(44, 35%, 30%), 0 5px 0 hsl(44, 35%, 27%), 0 6px 0 hsl(43, 35%, 25%), 0 7px 0 hsl(42, 35%, 23%), 0 8px 0 hsl(42, 35%, 21%), 0 0 1px rgba(162, 138, 78, 0.05), 0 1px 3px rgba(162, 138, 78, 0.2), 0 3px 4px rgba(162, 138, 78, 0.2), 0 5px 5px rgba(162, 138, 78, 0.2), 0 10px 6px rgba(162, 138, 78, 0.2), 0 20px 7px rgba(162, 138, 78, 0.3)`;
  23. You should be able to do something similar to that using a combination of toLocal and toGlobal methods. It's been a while since I've done it, but I know it is possible.
  24. Forgot to mention that if the page is scrolled, you may need to add the scroll position. timeline.to("#content", { y: 0.2 * window.innerHeight - (bounds.top + window.scrollY), duration: 2 });
  25. y isn't an absolute coordinate. You would need to calculate from where it's sitting. https://codepen.io/osublake/pen/f86b3f65f51ef2f625455fb7680d84db