OSUblake last won the day on April 16

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,479
  • Joined

  • Last visited

  • Days Won

    339

Everything posted by OSUblake

  1. Programmatic SVG not rendering correctly

    jQuery doesn't support SVG. https://github.com/jquery/jquery/wiki/Won't-Fix#svg-or-vml
  2. TimelineLite to mp4

    Hmmmm... sounds kind of complicated. SVGs can be converted into images. If you have HTML, you can put it inside of a <foreignObject> SVG element, and then convert the SVG into an image. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject Not sure how you were calculating the video time, but if you could get that dialed in, then you could just draw the video and svg image on a canvas using the .drawImage() method. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage ctx.drawImage(video, 0, 0); ctx.drawImage(svgImage, 0, 0); Actually, you could probably just add the video to the foreignObject, and capture the video with everything else. After that you can extract an image from the canvas using the .toDataURL() method. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL Once you have all your images, then you can convert them into a video using some encoder. I only used gif.js because it was easy to demonstrate inside of a browser, but you can use whatever. @swampthang might be able to expand on what I just described. I know he has a lot of experience with converting GSAP animations into video.
  3. Why isn't my svg's fill color changing?

    The MorphSVGPlugin will only change the path data, the stuff inside the d attribute. <path id="start" d="M129.06,46.05" /> To change the fill, you will need to set that yourself. function morph (){ TweenMax.to("#start", 1, { morphSVG:{shape:"#end",shapeIndex: 12}, fill: "#ff0000", ease:Bounce.easeOut }) }
  4. SVG Masks in a Loop

    That's a good question, and a concept a lot of people might not be familiar with, hoisting. https://www.w3schools.com/js/js_hoisting.asp The JavaScript compiler will move all variable declarations (var) and named functions to the top of their scope. This crazy looking code is totally valid. num = 8; num += 4; var num; console.log(num); // => 12 That's because the compiler is reading the code like this. var num; num = 8; num += 4; console.log(num); // => 12 The same goes for named functions. The branchDraw function comes after I call it. branchGroups.forEach(branchDraw); function branchDraw() { ... } But the compiler reads it like this. function branchDraw() { ... } branchGroups.forEach(branchDraw); But that will only work for named functions. Assigning an anonymous function to a variable will result in an error. branchGroups.forEach(branchDraw); // TypeError: branchDraw is not a function var branchDraw = function() { ... } And that's because the compiler is reading it like this. It only moves the declaration to the top. The initialization of the variable, assigning the function to it, stays where it is. var branchDraw; branchGroups.forEach(branchDraw); // TypeError: branchDraw is not a function branchDraw = function() { ... } Knowing that, a good way to organize your code is by putting the "what" at the top, i.e. your variables, and the "how" at the bottom i.e. your functions. // What var a = 1; var b = 2; var c = add(a, b); var d = subtract(c, a); var e = multiply(d, b); // How function add() { ... } function subtract() { ... } function multiply() { ... } And here's a little video about hoisting.
  5. SVG Masks in a Loop

    Yeah, you're right, const wasn't added in ES6, but I just always assume that a person is using ES6 if they're using const. Sorry about the confusion.
  6. SVG Masks in a Loop

    The dollar sign syntax ${} is part of a string template literal. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  7. SVG Masks in a Loop

    There's no jQuery in there. Just some ES6 JavaScript, which you were already using. I just added babel to that pen so it can compile down to ES5. The actual code should look like this. https://codepen.io/osublake/pen/PRWpOp.js
  8. SVG Masks in a Loop

    Here's how you could set the mask dynamically.
  9. SVG Masks in a Loop

    Oh yeah, nice catch! The mask urls are the same for both groups. <g id="branch-layer-four" fill="#cfcbc8" fill-rule="evenodd" mask="url(#branch-mask-four)"></g>
  10. SVG Masks in a Loop

    Can you make a simplified demo of that on CodePen? I don't know if I missed something in the code I posted, but instead of messing with for-loops, I like to call a function to make it easier to understand. So what I wrote could be written like this. const branchGroups = Array.from(document.querySelectorAll(".branch-group")); // Or old school const branchGroups = Array.prototype.slice.call(document.querySelectorAll(".branch-group")); branchGroups.forEach(branchDraw); function branchDraw(group) { const layerOneMask = group.querySelector(".layeronemask") const layerTwoMask = group.querySelector(".layertwomask") const layerThreeMask = group.querySelector(".layerthreemask") const layerFourMask = group.querySelector(".layerfourmask") const tl = new TimelineMax() tl .from(layerOneMask, 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: group, offset: -300 }) .addTo(controller) .setTween(tl) }
  11. SVG Masks in a Loop

    Try this... const branchDraw = function() { const branchGroup = document.querySelectorAll(".branch-group") //const layerOneMask = document.querySelectorAll(".layeronemask") //const layerTwoMask = document.querySelectorAll(".layertwomask") //const layerThreeMask = document.querySelectorAll(".layerthreemask") //const layerFourMask = document.querySelectorAll(".layerfourmask") for ( var i = 0; i < branchGroup.length; i++ ){ const group = branchGroup[i]; const layerOneMask = group.querySelector(".layeronemask") const layerTwoMask = group.querySelector(".layertwomask") const layerThreeMask = group.querySelector(".layerthreemask") const layerFourMask = group.querySelector(".layerfourmask") const tl = new TimelineMax() tl .from(layerOneMask, 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: group, offset: -300 }) .addTo(controller) .setTween(tl) } }
  12. SVG Masks in a Loop

    OK, here goes round 2. A triggerElement needs to be an element that is rendered so ScrollMagic can get its position. A mask is not rendered, nor is any element inside <defs>, so try using another element.
  13. SVG Masks in a Loop

    Yay! I answered my first ScrollMagic question without resorting to, "You don't need ScrollMagic for that".
  14. Question: How create a conditional TimeLine?

    Hi @GRoliins I can't tell what's going on based on the code you provided. Can you put that in a simple demo? I think you are just referencing stuff incorrectly.
  15. SVG Masks in a Loop

    I don't know ScrollMagic, and it's not a GSAP product, but maybe you need to create a new timeline. // const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ const tl = new TimelineMax() tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) }
  16. Infinite animation low fps

    Yes, canvas tutorials are getting harder and harder to find anymore. If you need any help in getting started, just ask, and we can point you in the right direction. PixiJS is a pretty easy library to get started with, and GSAP has a plugin to help simplify some of the animation code. http://www.pixijs.com/ You should check out some of the examples to get an idea of what it can do. http://pixijs.io/examples/#/basics/basic.js And the filters. http://pixijs.io/pixi-filters/tools/demo/
  17. Infinite animation low fps

    Yep. A tiling sprite could be used for that. http://pixijs.io/examples/#/basics/tiling-sprite.js That's what I'm using for the raindrop background here.
  18. Make Angular Animations Great Again

    The animation module for Angular 1 was a game changer, and has since been copied by other libraries like Vue and React. For Angular 2, they decided to take a different approach, and create their animation engine. At one point in time, they were looking at using GSAP, but went with using a declarative syntax with the Web Animations API instead. The end result has been pretty craptastic. Nobody uses it, not even the Angular Material team. So how do you animate state changes like this without using their engine? transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) I didn't know if that was possible using GSAP, but @apploud shared a script with me the other day that can do something similar, allowing you to create animations like this. "fadeIn => fadeOut": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 0 }), "fadeOut => fadeIn": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 1 }) It's just a very basic implementation right now, and needs some work, but it could be really helpful for Angular users who want to use GSAP. I don't have time to work on it, but it would be awesome if somebody else could work on it, and maybe make it into an NPM module. Like I said, it's pretty basic right now, so it's not going to work with wildcard or void states like this. // enter transition "void => *" : () => TweenLite.from(this.element.nativeElement, 1, { autoAlpha: 0 }) // leave transition "* => void" : () => TweenLite.to(this.element.nativeElement, 0, { autoAlpha: 0 }) You can see how it works in this demo. https://www.webpackbin.com/bins/-KlC3WIhC60G0V7Ck5CN
  19. Make Angular Animations Great Again

    Well that's a shame! That's where I kept all of my Angular demos, and it doesn't look like they were transferred over to codesandbox.
  20. Translation with big images on tiny computer

    Interesting. Sounds like a refresh sync issue, which causes screen tearing. https://en.wikipedia.org/wiki/Screen_tearing
  21. How have you used GreenSock?!

    I have first hand experience dealing with people messing with code in a fork. Remember this one? I didn't anticipate that people could just bypass the JavaScript filters I had in place, and had to spend an entire day adding filters to the database. That's like launching off an aircraft carrier. That's ludicrous! I did a search for the speed settings from the Spaceballs movie, and discovered that Tesla has similar settings. Look at the redirects. I forgot about plaid speed. https://en.wikipedia.org/wiki/Spaceballs
  22. Responsive tweens with function-based values

    Thanks! It should be noted that animating CSS variables like that just changes the inline style, so it will work with multiple elements.
  23. Off-Topic: Detect swipe-like gestures on trackpads

    The pointer event might not be used for the actual gesture event. It could be used to detect the start of a gesture, and how many fingers are being used. It's a really complicated topic because of differences in the device and browser being used. Nothing is really standardized. I looked at the some of the examples in the link I provided for the pointer events, and noticed something I've never seen before, a gesture event. It looks like it is something that is only supported in Safari browsers. https://developer.apple.com/documentation/webkitjs/gestureevent
  24. How to use GSAP with Vue/Webpack (vue-cli + webpack template)

    One thing I noticed with some CLI tools is that tree-shaking will remove imports that aren't being called directly. So try importing stuff without a name. import "gsap"; import "gsap/DrawSVGPlugin";
  25. Off-Topic: Detect swipe-like gestures on trackpads

    Yeah, the draggable example will only work for a mouse/touch events. A touchpad scroll gesture should fire a scroll event, well it does on my computer. But hammer does support scroll events.