OSUblake last won the day on July 17

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,612
  • Joined

  • Last visited

  • Days Won

    351

Everything posted by OSUblake

  1. OSUblake

    Waves animation add pause/resume

    Here's the thread about that pen... This is bascially all that tween is doing. It doesn't last long enough to actually animate anything. wave[0].setAttribute("d", drawPath(drawPoints(factor * settings.speed))); It really doesn't matter if you could touch the tween, pausing and resuming would make the animation jump because it's using the amount of actual time that has elapsed for the factor. var factor = totalTime*Math.PI; If you want, here's my waves demo from that thread with play and pause functionality.
  2. OSUblake

    How to conditionally reference a variable's name?

    Use an object or Map if you want to store stuff by name. var map = new Map(); var obj = {}; for(var i = 0; i < 10; i++){ var tl = new TimelineMax(); obj["slide" + i] = tl; map.set("slide" + i, tl); } console.log(obj.slide3 === map.get("slide3")) // true
  3. OSUblake

    wave banner animation background

    About the same amount of code, but in 3d.
  4. OSUblake

    wave banner animation background

    The secret sauce... Wave === Sine.easeInOut
  5. OSUblake

    draggable with friendly iframe cause error

    I have an issue similar to @OxXxigen which I think should be investigated. Draggable creates the same error when inside a Shadow DOM, which works a lot like an iframe. However, one difference is that when inside a Shadow DOM, the parentNode might be a document fragment, so the host element might be the actual parent. draggableTarget.parentNode.host; See the error in this demo. If you remove the "create-shadow" attribute, it won't create a shadowRoot, and everything works fine. <!-- Has shadowRoot, creates error --> <my-draggable create-shadow></my-draggable> <!-- No shadowRoot, no error --> <my-draggable></my-draggable> And check out the ES6 import in that demo. Look ma, no webpack! 😎
  6. OSUblake

    Choppy on retina, smooth elsewhere, why?

    A retina display has to draw 2 or 3 times as many pixels. Whatever this value is... console.log(window.devicePixelRatio); Heavy fullscreen image rotation with PixiJS, although I had to do a little optimization. Instead of using 3 1000x1000 images for each sequence, I combine them into a single spritesheet. Drawing a single 2000x2000 image performed a lot better than 3 1000x1000 images.
  7. OSUblake

    Can anyone help with pause and inner scroll?

    Oops! I forgot to mention that you might not need ScrollMagic. 😎
  8. OSUblake

    Can this mouse distortion effect be created with GSAP?

    To distort an image you will probably need to use WebGL. Using a mesh in PixiJS to do the BendyBox spin twist. A mesh is like a grid of points on an image, and could easily be manipulated by mouse movement.
  9. OSUblake

    Can anyone help with pause and inner scroll?

    Or you could use position sticky.
  10. OSUblake

    Don't reliably get Draggable target?

    Check the draggable instance. function onDragStart() { // This is your group console.log(this.target.id); } That's how events work, they bubble up. Again, check the instance. function onDragStart(event) { // Could go text > group > svg > body > html > document > window console.log(event.path); } Browsers don't include stroke when you ask for an element's size. You can put a transparent rect in your group to pad it.
  11. OSUblake

    Can't tween/move groups inside an svg object

    An svg inside an image is a security issue, but an svg inside an object is OK. But what's the point if you have to go through all that trouble? More conventional methods of accessing an SVG : Inlining it jQuery - http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview XHR - http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview Fetch
  12. OSUblake

    custom ease functions not working

    AS is ActionScript. Try the JavaScript version. https://greensock.com/docs/Easing/CustomEase
  13. OSUblake

    Killing tweens after page unload

    I'm not sure I understand your description of what's going on, but it's always a good idea to cleanup after yourself. Note that staggered tweens are actually an array of tweens, so you would have to loop through it. // Create myNamespace.tween1 = TweenMax.to(foo, 1, {}); myNamespace.tween2 = TweenMax.staggerTo(foo, 1, {}); // Destroy myNamespace.tween1.kill(); myNamespace.tween2.forEach(tween => tween.kill()); // Remove all references for good measure myNamespace.tween1 = null; myNamespace.tween2 = null;
  14. OSUblake

    Draggable Loop with Vanilla JS and Greensock

    Sorry, jQuery is all I know. Not really. That demo is a fork of that modifiers plugin demo which uses jQuery, so I kept it.
  15. OSUblake

    Draggable.hitTest() issue when element was rotated

    Basically the same question was asked here. It's not that hard to integrate a collision detection library with Draggable, it just needs to be run on every on drag.
  16. OSUblake

    Draggable + zoom out

    Mouse and click zooming (no animations). Use from tweens to animate zoom.
  17. OSUblake

    Timeline.set not firing every time in IE11

    As @Jonathan said, you should use .addEventListener(). But I would say that you should do that for everything. When you directly set an event handler, there can only be one. If there was some other code that was listening for load or scroll events, you just removed those listeners. // Only allows 1 event handler window.onload = function() {}; window.onscroll = function() {}; // Allows multiple event handlers window.addEventListener("load", function() {}); window.addEventListener("scroll", function() {});
  18. OSUblake

    import { ... } from 'gsap' vs from 'gsap/all'

    Sorry, I guess I should have pointed out that tree shaking is done by webpack or rollup, and will only work with ES6 modules, so Babel should not transform the modules. Maybe @GreenSock can update the docs to explain some of that. https://webpack.js.org/guides/tree-shaking/ https://webpack.js.org/loaders/babel-loader/ https://rollupjs.org/guide/en#danger-zone Preventing Babel from transforming the modules might not possible for some tools, like create react app, but you could still import each module individually. import TweenMax from "gsap/TweenMaxBase"; import TimelineMax from "gsap/TimelineMax"; import AttrPlugin from "gsap/AttrPlugin"; import CSSPlugin from "gsap/CSSPlugin"; const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin ];
  19. OSUblake

    Best way to use GSAP with Webpack

    const has been in browsers for years, you probably just never noticed. It was part of ES5, but was never standardized. https://caniuse.com/#search=const But it looks like Safari's original implementation is causing some problems so that should be fixed in the next version. https://github.com/greensock/GreenSock-JS/issues/272 I have no idea what that embrace "let" stuff is about though. That could allow reassignment of your exports, which is probably not a good idea.
  20. OSUblake

    How to limit Draggable to a path

    Hi @Deepak Oberoi Draggable uses simple axis-aligned bounding box (AABB) collision detection. It can only detect overlap between 2 boxes, like what is returned by Element.getBoundingClientRect(). For other shapes, you will need to handle the collision detection yourself, like inside a liveSnap points function. https://greensock.com/docs/Utilities/Draggable#snapping For collision detection between circles, lines, and convex polygons, you can use the Separating Axis Theorem (SAT). For concave polygons, you will have to split them up into smaller, convex shapes. Here are 2 libraries that can help with that. https://github.com/Sinova/Collisions https://github.com/jriecken/sat-js And here's a thread about using SAT with Draggable. I know that my demo doesn't work as intended in that thread, but I mentioned beforehand that it probably won't because you need to do collision detection while you're dragging.
  21. OSUblake

    Strange calls in FF's performance tab

    Weird. I don't know what would cause that, but you can see that it wasn't using your local file. It's using TweenMax.min.js from cdnjs.
  22. OSUblake

    Strange calls in FF's performance tab

    I don't know what you're doing, but those aren't calls made by GSAP. Those are scripts for the forum.
  23. OSUblake

    Webpack bundling Issue

    Actually, a script tag does the same thing as eval, and can be just as harmful. That's why browsers won't let you do something like this to create a script. someElement.innerHTML = '<script>alert("HACKED!")</script>'; // FAIL That, and the fact that the parser doesn't know where the script tag ends. See how it's done to create a CDN fallback. window.TweenMax || document.write('<script src="gsap/TweenMax.min.js">\x3C/script>')
  24. OSUblake

    import { ... } from 'gsap' vs from 'gsap/all'

    import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/all'; // vs import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; Here's the result of that. "gsap" is the brown/tan bundle, and "gsap/all" is the blue bundle. Not only is "gsap/all" smaller in size, but everything it imports will be hoisted, making it load it faster. Notice how "node_modules" only appears once for "gsap/all". It appears several times for "gsap". You can import like this if you want to, just don't expect the file size to be different. It doesn't matter what you do, the output will always be TweenMax with all it's plugins. // Exports everything in TweenMax import "gsap"; // Exports everything in TweenMax import TweenMax from "gsap"; // Exports everything in TweenMax import { TweenMax } from "gsap"; // Exports everything in TweenMax import TweenMax from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenMax } from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/TweenMax'; Let's just say that those methods are deprecated. This is now the recommended way to import a la carte. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin ];
  25. OSUblake

    Webpack bundling Issue

    Hi @GordonFreeman I tried to get your attention in another thread, but maybe you didn't get the notification. Script tags do that for a reason, but why are you even messing with a script tag and eval? That's a huge red flag. You should be using the output of webpack just like a normal JavaScript file. <script src="dist/bundle.js"></script>