OSUblake last won the day on August 13

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,664
  • Joined

  • Last visited

  • Days Won

    358

Everything posted by OSUblake

  1. OSUblake

    GSAP parallax Random Polygons

    Parallax movement is very simple. Objects further away from the observer move slower. Lerp your way to glory. While not a scrolling example, it shows how to use a simple multiplier value to set the speed i.e. duration for objects.
  2. OSUblake

    Class for triggering GSAP animations on scroll

    Looks good! You can do this instead of using bind if you're using Babel or TypeScript. I think it's cleaner, and it should technically run faster. class ScrollAnimations { constructor() { // 'this' will work without the use of bind this.el.addEventListener('scroll', this.onScroll, false) this.rAF = requestAnimationFrame(this.run) } onScroll = () => { ... } run = () => { ... } } And here's a simple of example of how you can use the scroll position with a timeline.
  3. OSUblake

    GSAP with mouseover JQuery

    Because you're just checking if there something called "mouseover" on a jQuery object, which there is. It's called a truthy value. https://developer.mozilla.org/en-US/docs/Glossary/Truthy // Try it console.log(Boolean($(".scale").mouseover));
  4. OSUblake

    GSAP with mouseover JQuery

    Your if statement will always be true. You might want to go check up on how jQuery hover works, and then make a demo if you can't get it working. https://api.jquery.com/hover/
  5. OSUblake

    Letters Shuffle Effect

    Join Club GreenSock... https://greensock.com/club That's what the ScrambleTextPlugin does. https://greensock.com/ScrambleTextPlugin
  6. OSUblake

    SVG layout trashing issue

    Your SVG is almost 4,000 lines of code with 10,000 DOM nodes. A lot of it doesn't even look important, like all these empty path coordinates. <path fill="#C9D0D2" d="M637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9 C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,398,637.1,398,637.1,397.9c0,0.1,0,0.1,0,0.1 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0 c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c-0.5-0.3-0.8-0.7-0.8-1.1l0.6,7.5c0,0.8,0.4,0.8,1,1 c0.6,0.2,1.3,0.2,1.9,0.1c0.7-0.1,1.1-0.2,1.1-1L637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9z"></path> You might want to run your SVG through an optimizer, like SVGO. https://jakearchibald.github.io/svgomg/
  7. OSUblake

    Exploding text effect on bitmaps

    Maybe with canvas. PixiJS is a good choice, and it supports bitmap fonts. http://pixijs.io/examples/#/demos/text-demo.js A star explosion... But that could be better. I'd break the text up into little shards to create an effect kind of like this.
  8. OSUblake

    Using plugins in Codepen Projects (NOT Pens!)

    Adding stackblitz would be nice too. Another idea. Create a single file with everything in it for all these online editors.
  9. OSUblake

    items not starting from the same point

    Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.
  10. OSUblake

    Install gsap in Vue+TS

    The whole types thing is screwy, but there are 2 different versions. @types/greensock is the old version which has the conflict. https://www.npmjs.com/package/@types/greensock @types/gsap is the newer, but still incomplete version. It shouldn't have that problem as the Animation class is now inside a "gsap" namespace. https://www.npmjs.com/package/@types/gsap
  11. OSUblake

    Drag svg file along with path

    A <g> element has no real position or size. It's defined by its children. That's why positioning everything at 0,0 and using the center works so well. If any children of a <g> cause the position or size to change i.e. its bounding box, everything will remain anchored around the center point. And you can't drag a nested <svg> element because transforms won't work on it, so you'll still need to use a <g> element somehow.
  12. OSUblake

    Drag svg file along with path

    Hehe @Rodrigo your code is the same as mine! I was also positioning everything from the center. Using the center with SVG and canvas elements makes everything so much easier.
  13. OSUblake

    Drag svg file along with path

    It's much easier to work with SVG when elements start at 0,0 coordinates, which is what my demo assumed. The patch should be in the very top-left corner, but it's not. Fix that and it should work just fine. Also, the line element doesn't have to be a real element. You can plug in your own values from your data for x1,y1,x2,y2 if you want.
  14. OSUblake

    Creating a fade-in for a page

    What I typically do is load up a shell of the page first, like the header, navigation, footer, etc, and then animate page content in and out. Here's an example of that using a basic router.
  15. OSUblake

    Creating a fade-in for a page

    To wait for everything to be loaded, like images, that snippet would look like this. if (document.readyState === "complete") { resolve(); } else { window.addEventListener("load", resolve); }
  16. OSUblake

    Creating a fade-in for a page

    Are you sure waiting for the page to completely load is a good idea? It looks like you have a bunch of images, and on a slow network the user might be staring at a blank screen for a while. Anyways, here's a pattern I sometimes use. I hide stuff until the DOM is ready by putting an "unresolved" attribute on elements to prevent FOUC. The unresolved name is arbitrary, so you can use whatever name you want. <html> <head> <style> [unresolved] { display: none; } </style> </head> <body unresolved> ... </body> </html> From there I check the readyState of the document to determine when to initialize the app. Notice the difference between the "DOMContentLoaded" and "load" events. I'm usually only interested in when the DOM is interactive, so I don't worry about all the images being loaded. https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load if (document.readyState === "interactive" || document.readyState === "complete") { resolve(); } else { window.addEventListener("DOMContentLoaded", resolve); } // Initialize your app function resolve() { document.body.removeAttribute("unresolved"); TweenMax.from("#content", 1, { opacity: 0, y: 50 }); }
  17. OSUblake

    SVG animations using GSAP & React in 2018

    I guess it depends on what your drawing, but most people animate the stroke-dashoffset and stroke-dasharray, like the DrawSVGPlugin does. https://greensock.com/docs/Plugins/DrawSVGPlugin Not saying that is the best technique, but it's certainly easy. For lines/polygons, I like animating SVGPoints directly. That can be used to create some pretty interesting stuff, like waves.
  18. OSUblake

    SVG animations using GSAP & React in 2018

    x1 is a property of a line, but it's value is set on a different path/object. this.line.x1.baseVal.value = 150; Definitely not a convenient value to animate. Try using the AttrPlugin. https://greensock.com/docs/Plugins/AttrPlugin TweenMax.to(this.line, 1, { attr: { x1: 150 }, stroke: "red" }) Updating to the latest version of GSAP wouldn't hurt either. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js
  19. Not only that, but the source code of that three.js demo does the same thing I described. Sine.easeInOut is Math.sin(). The 3d perspective isn't important. Look at how the init and render functions work. Demo - https://threejs.org/examples/#canvas_particles_waves Source - https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html For a parallax effect, you can scale your values by some ratio, like in this post. I'm guessing @Shaun Gorneau did something similar.
  20. OSUblake

    Best approach for animating width utilizing TimelineMax?

    You can use the intersection observer for scrolling, and there are polyfills for IE and Safari. It's asynchronous, so some of your code might be deferred under heavy load, but performance should generally be better. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Yes, check out the docs for the CSSPlugin. That's where most of the magic happens if you're animating the DOM. https://greensock.com/docs/Plugins/CSSPlugin Also, using CSS Containment can help with reflows/repaints, but browser support isn't that good at the moment. https://developer.mozilla.org/en-US/docs/Web/CSS/contain
  21. OSUblake

    Best approach for animating width utilizing TimelineMax?

    I hope you realize that getting the scroll position causes a reflow, so using ScrollMagic can negate some of those benfits. 🤔 https://gist.github.com/paulirish/5d52fb081b3570c81e3a And scaling isn't as optimized as most people like to think. The browser can rasterize the content, limiting the amount of scaling you can do before it starts looking like crap, or it can repaint the content on every animation frame. Using will-change will cause rasterization. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ To scale x, simply scaleX. .to( animate.down, 1, { x: animate.neg, y: animate.pos, scaleX: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) To prevent squashing/stretching of children during a scale animation, you can apply a counter scale.
  22. OSUblake

    Drag svg file along with path

    Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element. A couple threads on the technique.
  23. OSUblake

    Nested timeline remove pause automatically when nested

    You can always use promises for complicated async behaviors. Async/await works in all modern browsers, and there are plenty of polyfills for older browsers, button.addEventListener("click", async () => { await new Promise(resolve => animateAsync(resolve)); // Starts halfway through the first animation animateSync(); }); function animateAsync(resolve) { var tl = new TimelineMax({ delay: Math.random() }) .to(elementA, 2, { x: 500 }) .add(resolve, 1); } function animateSync() { TweenLite.to(elementB, 1, { x: 500 }); }
  24. OSUblake

    draggable with friendly iframe cause error

    Looking good! 👍
  25. OSUblake

    React support

    I played around with React and Redux once... 😝 Too many rules and constraints, and I like touching the DOM, so I set out to find something better. That's when I came across some nice VDOM alternatives, lit-html and hyperHTML. They're faster, more efficient, and accessing DOM nodes is perfectly ok. It's definitely worth checking out. Here's your simple list of elements demo using lit-html. Codepen doesn't have syntax highlighting, but there are plugins for that on VS Code.