Jump to content

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

OSUblake last won the day on October 23

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Welcome to the forums @wobwobwob I'm not noticing that problem in the demo you posted. How can I reproduce the issue?
  2. Welcome to the forums @MalinO It's impossible to say what's going on without seeing the issue. Can you make a minimal demo showing the issue? We don't need to see your entire project. Just enough code to recreate the issue. You can use CodeSandbox to make a React demo.
  3. Looks like you have syntax problems there, like nesting a scrollTrigger object inside another scrollTrigger object. Perhaps you meant something like this. const texts = gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { x:1000, duration:50, repeat:-1, ease:'linear', scrollTrigger: { trigger: text, } }); gsap.to(text, { xPercent:15, scrollTrigger: { trigger: text, scrub: true } }); });
  4. Hi crmichael, There is no magic code to make stuff run better on mobile. You have to be mindful of what you are telling the browser to do, and that site you linked to has a lot going on. It runs pretty choppy on my desktop. You should probably tone it down a bit, or consider using a faster renderer like PixiJS or Three.js. Just to render those 3d views takes over 40ms. An animation update should ideally be no longer than 16ms. 8ms is even better to match the refresh rate of modern screens, like the new iPhone.
  5. Hi pMedia, I remember *= and /= relative values being brought up a long time ago, but I can't find the post. The reason for not implementing them is that they are not a common operations, but every animation would have to check for those conditions, which adds a slight performance penalty. And since we added function based values, it makes this kind of thing pretty simple for most values. gsap.to(".box", { y: (i, el) => gsap.getProperty(el, "y") * 2 }) But color is of course a lot more complex. I guess you could use some GSAP utils to write your function to do that. Here's a very simplistic example that only multiplies the HSL values. gsap.to(".box", { backgroundColor: multiplyHSL("backgroundColor", 1, 1, 0.5) }) function multiplyHSL(prop, hValue, sValue, lValue) { return (i, el) => { let [h, s, l] = gsap.utils.splitColor(gsap.getProperty(el, prop), true); return `hsl(${h * hValue}, ${s * sValue}%, ${l * lValue}%)`; } }
  6. I'm not familiar with anyone around here that uses Magento, so it might be hard getting help. You could always post in the Jobs & Freelance forum. But if you can write JavaScript files, then you could always just dynamically insert the GSAP files kind of like this, but maybe using the CDN urls instead. https://stackoverflow.com/a/22534608/2760155
  7. Welcome the forums @thei You really can't animate a filled path like a stroke. At least not directly. What you can do is animate a mask that traces over your path. @PointC has wonderful tutorial that goes over this technique. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/
  8. Welcome to the forums @jxy What's barely working? And what can be done to make it better? CustomEase is a bonus to all registered users, as explained on the CustomEase FAQ, so you need to download the files from the installation page. React users include GSAP in a variety of different ways, but I'm going to assume you want the npm method. Please check out this video at around 2:50, it explains it better than I can in a forum post...
  9. Hi flim, Check out this post about immediateRender.
  10. Hi joris, Did you try it with setting pinSpacing to false? ScrollTrigger.create({ trigger: "#main-article", pin: true, pinSpacing: false, start: "bottom bottom", markers: true });
  11. OSUblake

    Multi-part slider

    Hi Jloafs, It looks like your video isn't working.
  12. That warning is from eslint and won't cause any problems. If you don't want to see the warning, add the eslint-disable-next-line comment above the array, or declare q inside your use effect. useEffect(() => { const q = gsap.utils.selector(...); }, []); Also, using logo1 as the selector context isn't going to work as it has no children. You should use a ref on the root element in your component. Please look at the examples provide above.
  13. Welcome to the forums @Design Geek Studio I have no idea how Magneto works, or what having authoring privileges even means in that context. Sounds like something you might want to bring up with your admin. But you really don't need to use requireJS as GSAP scripts are hosted on CDNs. https://greensock.com/docs/v3/Installation#CDN
  14. It looks like GSAP is setting the overflow when you resize, so you can just change it again onRefresh... A Pen by GreenSock (codepen.io)
  15. Hi dmckinght, It's better to create a new topic for such questions. Please look at the snap object in the ScrollTrigger docs. There is a duration value you can set.
  16. Welcome to the forums @Mehrus Using invalidateOnRefresh is the right approach, you just need use function based values to grab the correct value. Just some pseudo code. You will need to use your own calculations. .to(".foo", { y: () => innerHeight / 2 })
  17. Hi acantoro, You just need to add invalidateOnRefresh: true to your ScrollTriggers, and then use a function to grab the scale value. let heroTl = gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true ... } }); heroTl ... .to(imageEl, { scale: getScale });
  18. Hi mark, Maybe you could apply some sort of gradient fade to those, kind of like this. https://codepen.io/austriker/pen/RqpdoO
  19. Hi jenda, You can definitely calculate stuff dynamically, but I'm not sure where you are expecting that code to go. Could you make a minimal demo showing where you want to use those values?
  20. I'd second that. Most of the v2 syntax will work in v3, and the rest is pretty easy to convert using our Migration Guide. If you must use v2, you would just import like every other plugin. The only difference is that there is no registration of the plugin, so you should add the plugin to a dummy value so it doesn't get dropped due to tree shaking. import { TweenMax } from "gsap"; import { ModifiersPlugin } from "gsap/ModifiersPlugin"; const plugins = [ModifiersPlugin]; TweenMax.to("#foo", 1, { x: 100, modifiers: { ... } })
  21. Hi romain, You will need to clamp the values before calling mapRange. Using pipe would be really good for this kind of thing. let transform = gsap.utils.pipe( gsap.utils.clamp(0.27, 0.5), gsap.utils.mapRange(0.27, 0.5, 1, 1.2) ); ... transform(0.2) // 1 transform(0.6) // 1.2
  22. Hi flim! You just need to add invalidateOnRefresh: true to your ScrollTrigger, and put the calculation inside the start function. ScrollTrigger will fire that function on refresh so you don't have to add resize listeners. GSAP ScrollTrigger.resize() (codepen.io)
  23. Welcome to the forums @fede I couldn't even get your demo to scroll to begin with, so there is no animation. I noticed that you are using a lot of older GSAP syntax, and would recommend checking out our Migration Guide. And for working with Lottie, I would recommend checking out our Lottie helper function. https://greensock.com/docs/v3/HelperFunctions#lottie Perhaps you can fork this demo and show your issue since we know this one works. https://codepen.io/GreenSock/pen/QWdjEbx
  24. You'd need to separate all those letters into different paths. Then you can just do a stagger on the opacity or display. You should set the initial state in your CSS. So for opacity, you'd set it to 0 in your CSS. gsap.to("#mySvg path", { opacity: 1, stagger: 0.1 });
  25. That demo is kind of old, and the API has changed a little since then. Instead of pathDataToBezier, you should use the MotionPathPlugin. And be sure to check out the Migration Guide for all the other changes.