Jump to content

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

OSUblake last won the day on July 17

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Sounds like you might want to look at tweenFromTo(). https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()
  2. There are basically 3 different approaches to saving a reference to an animation and they all have different pros and cons. useRef Pros: Setting or changing it doesn't cause a render Cons: Have to remember to use current when referencing it useState Pros: Don't have use current when referencing it Cons: Setting it causes a render useMemo Pros: Don't have to use current when referencing it, and it can be declared directly inside the useMemo instead of an effect. It won't create and throw away a new timeline
  3. It will still create a new timeline on every render, it just won't change the ref. You can see this is in the logs when you click the render button. React Ref (codepen.io)
  4. Don't define it outside the useEffect. React will just create a brand new one on every render and throw it away. Can you create a minimal demo of the issue? And if by refresh, you mean hot reloading, well that's just a dev issue. Do a hard refresh.
  5. Try this. test switch (codepen.io)
  6. Make sure you are using the latest version, 3.7.1. There were a couple of bug fixes related to Firefox, but again, it's impossible to say what the issue is by just looking at code snippet. If you can create the animation without Angular, like a vanilla app, minify it, and it works in Firefox, then the problem is most likely related to Angular. Just a quick search of the error brought up this. https://stackoverflow.com/questions/42036349/uncaught-typeerror-intermediate-value-is-not-a-function Perhaps Angular's minify process is messing up a semi-colon somewhere.
  7. There is no need to import the CSSPlugin. And it's impossible to tell what's going on by just looking at code, especially if it only happens in a certain browser. Isolating the problem is best course of action. If it's saying it's an invalid property, then your target is probably not an element, like maybe it's an object. You'll see the same error here. gsap.to({}, { transformOrigin: "center" })
  8. You need to get the correct element references, and when working with any component framework, like Vue, you should never use GSAP's default selector as it searches the entire DOM. You should add refs... <div class="group" ref="group1"></div> // to access gsap.to(this.$refs.group1, { ... }) Or use GSAP's selector util. You were using an older version so I had to update it. Editing Children (codepen.io)
  9. OSUblake

    Nested Accordion

    It's really no different than calling a function that returns an animation. We're just customizing it. let toggle = createAnimation(); toggle(); function createAnimation() { let animation = gsap.to(".box", { x: 200 }); return function() { animation.reversed(!animation.reversed()); } } Pretty much the same thing as this. let toggle; createAnimation(); toggle(); function createAnimation() { let animation = gsap.to(".box", { x: 200 }); toggle = function() { animation.reversed(!animation.reversed()); } } But maybe the function closur
  10. Hi Johnee! It doesn't matter. It will return the same object. Adding it to a variable doesn't create a new one. So use it where ever it makes the most sense. But of course you have to wait for gtlf object to load before using it. var redShape1 = scene.getObjectByName("Red"); var redShape2 = scene.getObjectByName("Red"); console.log("SAME OBJECT", redShape1 === redShape2) // true You shouldn't use new. // BAD var cloudTl = new gsap.timeline({repeat:-1, yoyo: true}); // GOOD var cloudTl = gsap.timeline({repeat:-1, yoyo: true}); You just also us
  11. OSUblake

    Nested Accordion

    So here's my demo unrolled. Does it make sense now? Accordion unrolled (codepen.io)
  12. OSUblake

    Nested Accordion

    What's foreign? map? map is just a cleaner way to do some loop operations. Whatever you return will be added to a new array. // for loop let animations = []; for (let i = 0; i < myElements.length; i++) { let animaiton = gsap.to(myElemnts[i], { x: 100 }); animations.push(animation); } // forEach let animations = []; myElements.forEach(element => { let animaiton = gsap.to(element, { x: 100 }); animations.push(animation); }); // map let animations = myElements.map(element => { let animation = gsap.to(element, { x: 100 }); return animation; }); /
  13. Hi @Duet Colin Just in case that wasn't clear... Sprite Sheet Animation (codepen.io) In the future it's best to just create a new topic instead of reviving an old one.
  14. OSUblake

    Nested Accordion

    Welp. I thought I gave pretty good instructions in the original thread. A little old, but still relevant. How to toggle tweens in a DRY fashion - GSAP - GreenSock Guess it's time for @Carl make some videos on it.
  15. The best way to create multiple things of something is to just wrap everything up a function and then call it however many times you need to. You can of course pass in parameters to customize each instance. createAnimation(); createAnimation(); createAnimation(); function createAnimation() { // add sprite sheet code }
  16. No. An effect is really just a helper function that selects elements and merges props for you. It doesn't even have to do anything animated related.
  17. I would try putting them inside a centralized file like here. Haven't actually tried it, but I don't see why it would cause any problems.
  18. 3.7.1 is already out. Give it a go.
  19. OSUblake


    Make sure you're using the latest version, 3.7.1. Outside of that, there's not much we can do without seeing the problem first hand, like in a minimal repo that just shows the issue.
  20. Hi Joshua! The code file he used is the beta for the next release. 3.7.1 will work if you clean up your SVG. A good place to do that is SVGOMG. https://jakearchibald.github.io/svgomg/ It's always a good idea to run your SVG code through it. Try using this. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2015.8 858.76"> <defs> <style> .cls-4{fill:#e9e8d8}.cls-5{fill:#f60}.cls-6{fill:#45474a}.cls-7{fill:#fc0} </style> </defs> <path id="path" d="M2014.8 34.04c-126.87-32.48-310.91-58-499 9.18-231.24 82.61-2
  21. OSUblake

    Nested Accordion

    Here's a demo accordion. Accordion (codepen.io) Based on techniques from this thread.
  22. You would need to calculate the minX value here, which would be the width and padding of all the panels combined. this.mobileDrag = new Draggable(this.mobileGallery.nativeElement, { type: 'x', bounds: { minX: -5000, maxX: 0, minY: 0, maxY: 0 } });
  23. OSUblake


    Are you using nuxt? If so, I would try to transpile gsap. Or try using the umd files. Some frameworks aren't configured to consume es modules. import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
  24. Filter could work, but it returns an array... let getThumbnail = this.allMobileThumbnails.filter( (item, index) => index === 5); gsap.to(window, { scrollTo: { x: getThumbnail[0].nativeElement }, ease: 'power4', duration: 2 }); Kind of superfluous when you can just grab the value directly from the array. let index = 5; gsap.to(window, { scrollTo: { x: this.allMobileThumbnails[index].nativeElement }, ease: 'power4', duration: 2 }); I just thought of how I would solve it using vanilla JavaScript. It would be like this if you weren't usi
  25. this.allMobileThumbnails.toArray()[index].nativeElement That's rather verbose. You can use the new selector util to simplify selecting an element. // Angular @Component({ ... }) class MyComponent implements OnInit { constructor(public el: ElementRef) { this.q = gsap.utils.selector(el); } scrollTo() { // uses this.el.nativeElement.querySelectorAll() internally gsap.to(window, { scrollTo: { x: this.q(".box-1") } }); } }