Jump to content

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

OSUblake last won the day on December 3

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. If you made a plugin that adds JSON to an element like this... <div data-scroll-trigger='{ "scrub": true }'></div> It should be pretty easy to create your triggers, kind of like this... gsap.utils.toArray("[data-scroll-trigger]").forEach(el => { const data = JSON.parse(el.dataset.scrollTrigger || "{}"); ... ScrollTrigger.create({ trigger: el, ... }); });
  2. I have no idea as I have done anything like that, but a quick glance at there plugins, landed me at the container one, which you might be able to model something after. So maybe a special token and then right next to it some JSON with options to create your ScrollTriggers. ::: { "scrub": true } # Hello, World! ::: https://github.com/markdown-it/markdown-it-container Don't know if that would work, but I would focus on way to include some type of JSON object in the Markdown that could be parsed by a special plugin.
  3. Welcome to forums @Malik Turk You can make your timeline a little longer with some empty space in it like this. let tl = gsap.timeline(); tl.fromTo(marqueeText, { x: 0 }, { x: 100 }) .set({}, {}, "+=0.5"); // dummy tween to extend the timeline another 0.5 seconds ScrollTrigger.create({ animation: tl, trigger: document.querySelector('.marquee-image') start: 'top', end: 'bottom', pin: true, scrub: true, pinType: 'transform', });
  4. Welcome to the forums @PikabobAlex What I like to do is just make a function that will call itself on complete, kind of like this. animate() function animate() { gsap.timeline({ onComplete: animate }) .to(foo, { duration: "random(1, 3)", ... }) }
  5. I'm still unsure of what you're asking. Call it after what function? Your timeline code has a trigger in it, but that's not valid. If you want your animation to be part of the ScrollTrigger, you would add it as the animation. ScrollTrigger.create({ animation: animation, ... })
  6. Hi Tristan, Based on the CodePen you provided, you should not be using this, so you should probably remove that. this is mostly used inside methods of a class or object, or scoped functions, which you don't have. As for the calling an animation, I'm not sure what you are referring to as there is no GSAP code in your callbacks.
  7. The PixiPlugin works with DisplayObjects, which would be like a Sprite, Graphics, Container, or any other PIXI object that extends PIXI.DisplayObject. Filters do not extend DisplayObject. http://pixijs.download/release/docs/PIXI.DisplayObject.html For your animation, you will need to target the properties directly. gsap.to(displacementFilterCloud.scale, { x: 180, y: 180 })
  8. Since you're not installing a Club Greensock package, the only difference you would see between a normal npm install and the .tgz one is the addition of CustomEase. Or are you saying you don't even have gsap folder in your node_modules folder?
  9. That doesn't look like the Club Greensock package. You would be able to download a normal package even if you weren't Club Greensock member as that's how we currently distribute CustomEase, which is available to anyone who has a GreenSock account. Make sure you are logged into the correct account that is associated with Club Greensock before downloading. The account you are using right now is not a Club Greensock.
  10. For loops, you just need multiply the value by the index. It's the same as keeping track of a sum. array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, delay: i * 0.3 }) })
  11. Hi, You should not use onload inside React. There is no guarantee that will run at the correct time, so it would be best to put your logic inside a useEffect/useLayoutEffect. If you haven't already, be sure to check out our React Guide. All your letters are animating at the same time because you aren't delaying or staggering them. Probably easiest to just do a stagger on a common class name. And going back to the React Guide, it's best to use the scoped selector. useLayoutEffect(() => { gsap.from(q(".char"), { yPercent: -100, stagger: 0.1, ease: "power3.inOut" }); }, []); If you need anymore help, here's CodeSandbox template you can fork. https://codesandbox.io/s/gsap-react-starter-ut42t
  12. Hi peiterm, You're going to need to calculate the difference, kind of like what is shown here.
  13. Hi SJH, Nuxt doesn't work with ES Modules by default. You'll have to manually config nuxt... OR you can use the UMD files. import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";
  14. Hi flim, It's really not a good idea to try and animate a background image like as the browser will reload the images. It might better to use a gradient that is easier to animate, like an SVG.
  15. Yeah, give it a shot, and if you get stuck, just throw it a codepen and I can take a look. But like I mentioned earlier, it won't allow overlaps so the images won't be as tightly packed as your image. You can replace left and top with x and y. They would be the same thing. The object I used is just to represent the bounds of a rectangle, so the names really don't matter.
  16. Hi PixelBakery, That would be incredibly difficult to do without a complex collision detection algorithm as the bounding boxes would overlap. If the images didn't overlap, you could do a brute force method where you just check if the space is occupied. Here's an old demo where I do that with boxes. https://codepen.io/osublake/pen/WjWPob And circle packing... https://codepen.io/osublake/pen/bWJZVB
  17. You would need to use arrow functions as they aren't scoped... scrollTop: (value) => { return arguments.length ? this.locoScroll.scrollTo(value, 0, 0) : this.locoScroll.scroll.instance.scroll.y; },
  18. It might have been a fallback many, many years ago, but Flexbox is supported in every browser, including IE, so there's no reason to use it.
  19. Hi Shutt, Do you mean something like this? A Pen by GreenSock (codepen.io)
  20. Cassie forked someone else's pen that already had that CSS in it. I don't think you need... https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack
  21. It looks like you are trying to use Vue or Nuxt, which you can use CodeSandbox for. And you don't need to include images. Just use placeholder images or colored boxes. https://codesandbox.io/
  22. Those are 2 different installation methods. You can't do both. Please watch this video...
  23. Hi @stephens Do you think you can put what you did in a CodeSandbox so others can see?
  24. There are other ways to get elements, like with this.targets(), but that's more for callbacks, like onComplete. And then there is the toArray util, which is useful when you want to do a loop. Draggable is a little bit different, and you can always get the target with this.target inside a Draggable callback.
  25. Welcome the forums @Paul123 You can use function based values for that. The first parameter is the index of the element, and the second parameter will be the element. gsap.to('.selector', { duration: 1, y: (i, el) => el.offsetHeight })