Jump to content

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

OSUblake last won the day on December 11

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. When the browser resizes, the entire layout has to be recalculated, putting a lot of strain on the browser. Trying to have smooth transitions during a resize is a waste of time in my opinion. It adds nothing to the user experience, and normal users don't constantly resize their browsers like devs do. Can it be done? Sure, but it requires some careful programming.
  2. OSUblake

    Draggable unit?

    Hi @Jan The Ran Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll. https://codepen.io/osublake/pen/d63bc6ee64346454fbbf6015ac196744 Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms. https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060
  3. TweenMax and TimelineLite are just aliases for the new gsap.* syntax. gsap.to(foo, {}); // Same as doing TweenMax.to(foo, 0.5, {}); gsap.timeline().to(foo, {}); // Same as doing new TimelineLite().to(foo, 0.5, {}); If you need them for backwards compatibility, just import them like this. import { TweenMax, TimelineLite } from "gsap/dist/gsap";
  4. For SSR, you'll probably need to use the UMD/CommonJS files in the dist folder like this. There is no all.js file. import { gsap } from "gsap/dist/gsap"; import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin);
  5. You're not creating a new path, so it's getting added to the previous rect. ctx.clearRect(0, 0, 100, 10); ctx.beginPath(); ctx.rect(0, 0, bar.degree, 10); ctx.fill(); Or even simpler. ctx.clearRect(0, 0, 100, 10); ctx.fillRect(0, 0, bar.degree, 10);
  6. It looks like the problem is that you are animating the progress down to 1. Try changing the degree to 100. gsap.to(bar, { duration: 0.2, degree: 1, // change this to 100 onUpdate: drawState, onComplete: hidePreloader });
  7. OSUblake

    Draggable unit?

    People have challenged me on this. I just say, look at the markup. Its width and height are set to 100%. Setting the <rect> element's width and height to 1000 would have the same effect. <svg id="svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet"> <rect id="svg-background" x="0" y="0" width="100%" height="100%" /> </svg>
  8. OSUblake

    Draggable unit?

    If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed. Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value. https://codepen.io/osublake/pen/5d84dcad3edc6da20354948dbcdf6489 Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works.
  9. Using the updated version. https://codepen.io/osublake/pen/97c87a4f788d75b405a90b9f308afbf4
  10. We don't check previous posts for updated demos. You should always make changes to a fork, and post that fork in a new reply.
  11. I forgot about computed property names. Here's another version of my animation using a single function. https://codepen.io/osublake/pen/a0eeae71974a4d17afdc41a7147576ee
  12. Make a demo showing the problem, and CLEARLY describe what should happen if you rapidly click on those buttons.
  13. Yes, it's an es6 feature. IE will choke on shorthand method names. But the OP is using arrow functions, so it shouldn't matter. Arrow functions don't work in IE either.
  14. And you don't have to write onUpdate: function() {}. This syntax makes it even shorter than an arrow function in most cases. gsap.to(foo, { onUpdate() { console.log(this.progress()); } });
  15. It's amazing how many times a bad snippet of code ends up being copied. https://greensock.com/forums/topic/19789-follow-by-mouse/?tab=comments#comment-92033 Use position: fixed. https://codepen.io/osublake/pen/c0167e469feb95cd8ced1835d4e92919
  16. Function based values have been in gsap for a long time. I made this collection back in 2016. https://codepen.io/collection/nVjkaB You shouldn't include the animation for #target inside the loop. You're just creating the same animation 80 times, which is kind of wasteful. dots.to('#target', 0.5, {scale:0, autoAlpha:0}, 0); for (i = 0; i < qty; i++) { numX = Math.round(random(-10, 10)) * 100; numY = Math.round(random(-10, 10)) * 100; babyLogo = $("<img src='"+ homeLogo +"' class='baby-logo' />").appendTo(explodeContainer); dots.to(babyLogo, 1, {x:numX, y: numY, autoAlpha:0}, 0.2); }
  17. It works the same. The difference is the target property. function updateOutput() { const value = Math.round(this.targets()[0].degree); output.innerText = value; } // if you know the target, this is much simpler function updateOutput() { const value = Math.round(bar.degree); output.innerText = value; } To use interpolate, you can do this. https://codepen.io/osublake/pen/3761294853fef89c19b7ab856f2cf5fa I think the first way is better for a use case like this.
  18. e.pageY does the same thing.
  19. Please see this post. The animation has always been scoped to the callback.
  20. You can't animate an attribute if it doesn't exist.
  21. That is what I would recommend. Or you could make a single file to do all the registering, and just export what you will actually reference from that file. It gives you a nice centralized place to register and keep track of what plugins you are using, and streamline your code a bit. my-gsap.js import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(Draggable, ScrollToPlugin, TextPlugin); // No need to export ScrollToPlugin or TextPlugin // as you probably won't need to reference them directly export { gsap, Draggable }; my-component.js import { gsap, Draggable } from "./my-gsap.js"; // Make sure you import from the file you created gsap.to("#foo", { text: "Some Text" }); // Works gsap.to(window, { scrollTo: 400 }); // Works Draggable.create("#bar");
  22. What's with the pron button? This targets the every element named baby-logo. TweenMax.to('.baby-logo', 2, { x: x, y: x }); So start by fixing your loop. function explode(){ for(let i = 0; i < 10; i++){ let explodeImgWidth = Math.round(Math.random() * 99) + 1; let x = Math.round(Math.random() * 99) + 1; let y = Math.round(Math.random() * 99) + 1; let img = $( "<img src='images/logo.png' style='width: "+ explodeImgWidth +"px;' class='baby-logo'>" ).appendTo(explodeContainer); TweenMax.to(img, 2, { x: x, y: x }); } TweenMax.to('#target', 0.2, { scale: 0, autoAlpha: 0 }); }
  23. Chrome returns the computed box shadow style with color first, so it needs to be in that format. boxShadow: "rgba(0,0,255,0.8) 8px 8px 8px" https://codepen.io/osublake/pen/94d4b78c7bbe8960b2a76206ce1abb6b To work across all browsers, you should animate an plain old JavaScript object with the box shadow values you want, and then in onUpdate callback, apply the new box shadow value. https://codepen.io/osublake/pen/7c70ddf8a08dac50da43702e92e66eed