Jump to content

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

OSUblake last won the day on September 10

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


OSUblake last won the day on September 10

OSUblake had the most liked content!

Community Reputation

10,314 Superhero

About OSUblake

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

18,936 profile views
  1. That's called vintage, and it's very popular.
  2. You can manually calculate the length, but this is much easier. https://codepen.io/osublake/pen/GjYpPr
  3. OSUblake

    Grid to fullscreen

    You don't do it once. You create a new animation every time.
  4. OSUblake

    Grid to fullscreen

    In the first demo I posted, I used this function to get the position with scroll. var root = document.documentElement; var body = document.body; ... function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; }
  5. Do you have a GSAP question? It doesn't look like you're using GSAP. This type of question is beyond the scope of the forum. Having a wave rebound off a wall is incredibly difficult to do. You would most likely need some type of physics engine. http://google.github.io/liquidfun/ https://codepen.io/ste-vg/pen/XRvBNg
  6. That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97
  7. I think you posted the wrong demo. https://codepen.io/GreenSock/pen/WNezBRq
  8. OSUblake

    Grid to fullscreen

    That's not how .reverse() works. https://greensock.com/docs/TimelineMax/reverse() Posting code snippets isn't helpful. Fork your previous demo, and show us that it's not working. Also, I saw your demo on mobile, and I think you're going to have problems when the page has been scrolled. This might be helpful to look at. https://codepen.io/osublake/pen/WwgQEV Here's another good demo to learn from. https://codepen.io/osublake/pen/zMqevJ That demo is from this thread.
  9. This too, I was looking at your import problem, which you didn't clearly illustrate. Export a function to create the animation.
  10. You are exporting a default here. export default intro But not importing a default here. import {Grid, Animations} from "./components" Check out the docs on import and export. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export I would skip exporting a default. export { intro };
  11. I see. Your build is probably is probably dropping the import. See the section on Tree Shaking here. https://greensock.com/docs/NPMUsage So you would probably need to do this. import MorphSVGPlugin from "gsap/src/uncompressed/plugins/MorphSVGPlugin"; // You need to reference the plugin somewhere in your code const plugins = [MorphSVGPlugin];
  12. And this one. https://codepen.io/MAW/pen/KdmwMb
  13. How about this? It's much simpler. https://codepen.io/MAW/pen/wBGvgW
  14. Saying you ran "npm run build" means nothing to us because that is based on your how your project is setup. Did you try putting the actual plugin in the gsap folder in node_modules?