Jump to content

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    private pen

  2. Sorry if it came off that way. I brought up CSS grid because animating tables can be very problematic. Tables were not designed with animations in mind, which is why you still have to use attributes to get some table elements to display correctly. And there is usually more than one way to solve a problem. Using CSS grid was part 1 of my recommendation. You called me a troll before I got to part 2 below. The gaps are caused because of rounding. An 81px wide element at a scale of 0.786 is 63.666000000000004 pixels. Not exactly a whole number, so you might see artifacts bleeding through. To get rid of those gaps, you can use will-change: transform; in your css. The browser can rasterize (take a snapshot) of the layout before scaling gets involved. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
  3. Why are you even using a table? Tables are designed to display data. If you want a table-like layout, then use CSS grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
  4. You can't use the variable name top at the global level because it refers to something else. https://developer.mozilla.org/en-US/docs/Web/API/Window/top Just rename your top variable to something else.
  5. Not really. Google has its own walled planet sans China. I'm not saying that's a good thing... but that's the reality of the internet right now. I agree. Web components are awesome. No React. No Vue. No frameworks. Just good old fashioned HTML.
  6. Using a letter makes no sense. Numbers are your friend when it comes to repeating something... and so are loops. There are many ways to do a loop, and here is one. https://codepen.io/osublake/pen/c35a7a69af6a6db997249a6111e6f930
  7. And that's why we have AMP. At its core, Google is an advertising company.
  8. Then do the same thing. GSAP classes will be on the parent from inside an iframe. var box = document.querySelector("#box"); window.parent.TweenMax.to(box, 1, { x: 100 }); Depending on how deep your iframe is, you may need to something like window.parent.parent...
  9. You may need to use a fully qualified URI for caching to work, but this is a server question, and you will probably get a better answer on StackOverlow. https://stackoverflow.com/ Also, caching. https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
  10. As an outsider to the banner ad industry, I will say that animated ads are very frustrating on mobile. I can deal with static ads, but I will click away from a site if it looks like the animated ads are making the site unresponsive.
  11. Why would you need to make another file? The only reason to ever create another file is for organization of your code. Make sure you proofread the file you're already working on. 'hook' can't be right. That's looking for a <hook></hook> element. Did you mean '#hook'? const scene2 = new ScrollMagic.Scene({ triggerElement: 'hook', duration: 395, triggerHook: 0.9 })
  12. Rounding error. Seems that happens in other languages too.
  13. If you need something to be sticky, just use CSS. https://codepen.io/osublake/pen/41a997ea6297132313629b608d0ba39f
  14. Yep. Works fine without ScrollMagic. A wise man once said, "You might not need ScrollMagic".
  15. Oh, I see. In that case, you might want to look at lagSmoothing ad well. https://greensock.com/docs/TweenLite/static.lagSmoothing()
  16. Any particular reason you need to know when it updates? But you can add an event listener to the ticker. https://greensock.com/docs/TweenLite/static.ticker
  17. Hey @Luckyde I'm still out of town... applying for a new job, but that's not important. I could have sworn that you replied to my last post, but I don't see it anymore. I just wanted to make sure that something didn't go wrong on GSAP's end. We are in the middle of upgrading the forum software here, so it's possible that your last post might have deleted by accident.
  18. Again, this is going back to what I said earlier. Just load your GSAP files through normal script tags. Nuxt is going to try and run stuff as server side code.
  19. If you want to animate width from the center, then you're going to have to move it the left at the same time, preferably using x instead of left. You would move it half the width you're animating.
  20. @GreenSock you might want to check out this problem and see if it needs fixing.
  21. Before you start digging into source code, you should at least try troubleshooting your SVG code first. You have have a pointless m0 0 at the end here. <path id="source" style="" d="m256 421h30l60-135h-150zm0 0"/> Remove it, and it seems to work fine. <path id="source" style="" d="m256 421h30l60-135h-150z"/>
  22. Don't know about swapping things out. What I do know is that when you change something in the data object, Vue runs those changes asynchronously. It uses a Promise to make that change in the next event loop tick. Using a fromTo(), from(), or set() tween might be causing problems because those changes are supposed to be synchronous. But again, I think the main issue here is that timelines don't belong in the data object. Just like in React, Timelines don't belong in the state object.
  23. Wasn't try to steer the original question. My main point is that your data should be simple. Something that can be converted into json. And the more I looked into this, it appears to only happen with attributes, but I don't know why. I checked, and the startAt and end values are correct for the animation.
  24. Also, you should probably use $refs instead of selectors like ". moving-rect" and ".circle". Elements may be swapped out during rerenders e.g. when Vue detects a change.
  25. Vue's data system uses setters to detect changes, which is being triggered with this.timeline = new TimelineMax() in your mounted section because it's a different type than null. And you don't need reactivity for a timeline. Vue can't detect when you make changes to a timeline.