Jump to content
GreenSock

Rodrigo last won the day on May 2 2021

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Posts

    2,114
  • Joined

  • Last visited

  • Days Won

    168

Everything posted by Rodrigo

  1. Rodrigo

    MorphSVG in ReactJS

    Hi, No need for this actually: const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"; script.async = true; document.body.appendChild(script); const script2 = document.createElement("script2"); script.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"; script.async = true; document.body.appendChild(script2); Also you're replacing the src attribute of the first constant and the second script tag has no src attribute. Just install GSAP in the dependencies section and add the URL to the test Plugin file in the external resources section: Then you should be able to find the MorphSVG plugin in the window object, so you can use gsap.registerPlugin(), something like this: import { gsap } from "gsap"; gsap.registerPlugin(window.MorphSVGPlugin); Happy Tweening!!!
  2. Yeah the window object can be a tricky thing to grasp, but in order to simplify it if you check the properties innerHeight and innerWidth of the window, you'll see that those are basically the dimensions of the browser where the content is actually rendered (including the scroll bars), so those are basically the bounds being applied. https://developer.mozilla.org/en-US/docs/Web/API/Window Perhaps you could try the body tag in the document object. Although I wouldn't recommend it is finally up to you to make that decision: https://developer.mozilla.org/en-US/docs/Web/API/Document/body Happy Tweening!!!
  3. Hi, Thanks for the live sample, it was quite helpful. The issue is being cause by the bounds you're setting for the Draggable instances, when you remove that it actually works as expected. What I'm seeing is that if a specific percentage of the Draggable instance target, in this case the <a> tag wrapping the image, is not in the viewport, GSAP enforces that at least that portion of the element is within the established bounds by adding a translate3d style to the element. I don't know if this is by design or not, perhaps @GreenSock or @OSUblake could clarify that for us. Considering the fact that you set the bounds to be the window object, is completely logical that the elements are out of position. In the mean time, remove those bounds and create a new set of bounds. Perhaps wrap your form elements or do something like the codepen created by Blake that @Carl linked above in this thread. Happy Tweening!!!
  4. Rodrigo

    MorphSVG in ReactJS

    On top of the already great advice by Blake and granularclouds, this is not going to work: import gsap from 'gsap'; import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; import Shape1 from '../src/styles/components/assets/shape1.svg'; import Shape2 from '../src/styles/components/assets/shape2.svg'; gsap.registerPlugin(MorphSVGPlugin); MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); useEffect(()=> { gsap.to(Shape1.current, {morphSVG: Shape2.current, duration:2}); }) Shape1 and Shape2 are definitions at the top of the file's scope, that come from importing a specific file, they are not React refs so neither has a current property, so that particular GSAP instance is not going to produce any results. What you should do is take a path in your JSX, create a ref in it and use that in your useEffect hook: const myShape = useRef(); useEffect(() => { gsap.to(myShape.current, { morphSVG: Shape1, duration: 2 }); }, []); return ( <svg> <path ref={myShape} d="..." /> </svg> ) Finally always use a dependencies array in your useEffect hook in order to prevent it from being triggered every time the state or props of that component are updated. Happy Tweening!!!
  5. Hi and thanks for the reduced sample, it definitely helped to identify the problem, great job!!!! Basically the issue is that you have a few GSAP instances dealing with the same properties in your target element. What I saw was the element being scaled and positioned as expected and then BAM!!! the dreadful jump . This happened because another instance came to alter basically the same properties of your element. The problem is that when this instance is created during the useEffect hook, it takes the starting values the element has at that point and not the ones it will have once the animation is running. This is what you have now (I removed the scroll trigger and the next fromTo instance because those were not the cause of the issue): tl.to(sectionFirst.current, { scale: 1, x: 0, duration: 3, ease: "power2.out" }); When this instance is created sectionFirst has a scale of 1 and an x position of 0, which are the values GSAP stores in a lookup table for better performance, so when the timeline reaches this point it uses those values as the starting point and then updates them to the final values, which are the same, hence the jump. Changing your code to this seems to do what you're trying to achieve: tl.fromTo(sectionFirst.current, { scale: 0.53, x: -290, }, { scrollTrigger: { trigger: "#data-vendor", start: "bottom+=150 300", end: "bottom+=250 100", markers: true, scrub: true }, scale: 1, x: 0, duration: 3, immediateRender: false, ease: "power2.out" }); Once again I removed the final fromTo instance since that seems to work OK. Basically I replaced the to instance with a fromTo instance taking the values from the previous tween and setting the immediateRender to false in it, in order to prevent this from being enforced at the start of the very first timeline when the element is first visible. Hopefully this makes sense and does what you're after. Happy Tweening!!!
  6. Hi, Unfortunately that doesn't really helps. I assume that the code in question is in the index.js page, which is over a thousand lines of code. Try creating a reduced sample in codesandbox using the React starter template, no need for all the gatsby stuff, just the relevant GSAP code that is giving you the issues. If you want you can simulate content by giving the container a fixed height in VH to have some scrolling space soto speak.
  7. Sorry, but there isn't much I can do with the sample you provide since there isn't a way to tinker with the code. You can create a sample in codepen using jQuery ajax and get some dumy images from unsplash: $.ajax({ url: "https://images.unsplash.com/photo-1548366086-7f1b76106622?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=624&q=80", crossDomain: true }).done(function(){ console.log("DONE!!!!"); }); I just tested that code in codepen and I don't get any errors.
  8. Hi and welcome to the GreenSock forums. Can you provide a reduced live sample showing just the issue that we can take a look at in Codesandbox? You can even deploy a Github repo if you want, which makes things simpler. The issue is there but it's quite difficult to troubleshoot a live bundled app with just that snippet. Happy Tweening!!!
  9. Can you create a minimal demo showing just the issues you're having? With the snippet you posted there isn't much we can do. Finally it seems that you're having a few issues with CSS, which is definitely not a GSAP-related issue, perhaps you could try using flexbox or css grids to see how it works in that setup. Happy Tweening!!!
  10. Hi, Have you tried this without the scroller proxy and just ScrollTrigger? Can you provide a minimal live sample in Codesandbox, so we can take a better look at this? Finally I'm not all that familiar with Gatsby (honestly if forced to work with a React site generator I prefer NextJS) and I could be wrong, but isn't the layout component the one that wraps virtually every page/route? Isn't a way to pass the references as props instead of attaching them to the window object? Considering that you can create SSR stuff with Gatsby that could throw an error during the build process since there is no window object in that particular phase. Happy Tweening!!!
  11. Hi and welcome to the GreenSock forums. Definitely you can use GSAP to animate your content slider. In fact two of our superstars have created amazing slider samples. This one by @Chrysto https://codepen.io/bassta/pen/kDvmC This one by @PointC https://codepen.io/PointC/pen/YRzRyM As an advice your starting point should be to create refs for each slide and use a useEffect hook in order to go to the target slide when the state is updated. Finally instead of using all sorts of calculations use xPercent in order to move the element to the desired direction, xPercent basically moves the target element based on it's size. In this case if a slide is 800px width and you usexPercent: -100 the slide will move 800px to the left, if you use fluid width it will use whatever width the element has, it's a great trick for responsive animations. Just make each slide to use all the available height and width of it's container and that such container has an overflow: hidden of course. If you have any issues with your GSAP approach, feel free to create a reduced live sample in Codesandbox in order to take a better look at it. Happy Tweening!!!
  12. @BrianCross Is right, you only have one element in your marquee, so is kind of hard to make it work like that. Also you're not including the modifiers plugin in order to create the endless animation. I made a simple example for this: https://codesandbox.io/s/gsap-endless-marquee-l5tv4 Finally, I haven't used the react-gsap package, so I'm using the regular approach to use GSAP in a React project. Since that is not a GSAP official project we don't have enough time to offer support on how to use it correctly, but based on what I can see, it shouldn't be too complicated. Although I simply prefer the traditional way. Happy Tweening!!!
  13. Hi and welcome to the GreenSock forums. The problem in your sample is that in the useEffect hook you're assigning the GSAP instance to the titleStyleRef.current value on every loop, so basically you're doing that three times and of course the final one will be the reference there. Also you don't need to use a forEach loop, since you can use an array.map() method to return the new array. This code seems to be doing what you're after: function App() { const titleRef = useRef([]); const titleStyleRef = useRef([]); const addTitlesToRef = (el) => { if (el && !titleRef.current.includes(el)) { titleRef.current.push(el); } }; useEffect(() => { titleStyleRef.current = titleRef.current.map((title, index) => { return gsap.to(title, { duration: 1, opacity: 1, paused: true, ease: "power3" }); }); }, []); return (/* JSX HERE */); }; Also don't forget to pass an array with dependencies in the useEffect hook, otherwise that code will run every time your component's state is updated. Happy Tweening!!!
  14. Hi, If you take a closer look in the browser's dev tools, you'll see that the site is using GSAP 3.6 and a specific package called perfect scrollbar: https://mdbootstrap.com/freebies/perfect-scrollbar/ Finally the effect is achieved using SVG, each letter in the Bridge word is an SVG path and they're using a scale and position tween to animate the letters into position. Here is a super simple example of this: https://codepen.io/rhernando/pen/mdRWNpN?editors=0010 You have to play with the letters initial positions and of course the SVG position as well, but hopefully will be enough to get you started. Happy Tweening!!!
  15. Hi and welcome to the GreenSock forums. Animations with Vue and GSAP are a breeze, in fact Vue's official documentation mentions GSAP as one of the alternatives to create animations since some members of the core team in Vue actually use GSAP in their projects. I don't have enough time to set up a working sample right now, but you should start by checking Vue's documentation on animations: https://vuejs.org/v2/guide/transitions.html And then Vue Router's docs on the same subject: https://router.vuejs.org/guide/advanced/transitions.html Happy Tweening!!!
  16. Rodrigo

    Silent Error

    Hi, Can you extend a little bit about this, with just that information, personally I have no idea what could be the issue. I found something in the matrix helper in the source code but beyond that there is nothing I can think about. Please provide a bit more information (which other frameworks you're using, perhaps this could be a SSR issue) about the stack you're using in your development and if possible a reduced live sample in Codepen or Codesandbox. Happy Tweening!!!
  17. In order to do that you can use the position parameter, that will allow you to add delays and/or overlapping between the instances of your timelines: Happy Tweening!!!
  18. Hi and welcome to the GreenSock forums, also thanks for becoming a Club member and supporting GSAP!!!🙌 The main issue that I see in your code is that you're using the ID attributes in your <svg> tags. Those ids should be on your <path> tags: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve"> <path d="..." id="copier" /> </svg> <svg version="1.1" style="visibility: hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="85.969px" height="85.813px" viewBox="0 0 85.969 85.813" enable-background="new 0 0 85.969 85.813" xml:space="preserve"> <path d="..." id="fax" /> </svg> Give that a try and let us know how it goes. If you keep having issues, please try to create a reduced live sample so we can have a better look at this: Happy Tweening!!!
  19. Hi, Have you tried the same approach you're using with the sphere element? gsap.timeline() .to(camera.position, { x: 50 }) .to(camera.position, { x: 150, y: 50 }); You could also plug the MotionPath Plugin to use either an SVG path or a set of coordinates: https://greensock.com/docs/v3/Plugins/MotionPathPlugin Happy Tweening!!!
  20. Hi, You could try disabling the ScrollTrigger instance on the focus event and enabling it back on he blur event. https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() https://greensock.com/docs/v3/Plugins/ScrollTrigger/enable() Happy Tweening!!!
  21. Hi Fernando, The thing is that your timeline is actually reversing by the time the reverse() method is called. The process is roughly as follow: You create the Timeline instance: gsap.timeline() at this point your timeline is active and moving forward as expected. Then you add your timeline instances using .to() and .from(), your timeline is still active and moving forward. Finally you add a .reverse() method, at this point GSAP says, OK this instance should now going back and not forward. If you check your timeline you'll see that is both active and it's reversed status is true. The issue is that the time elapsed since you create the instance and the code reaches the .reverse() method is just a few milliseconds. If I had to guess I would say no more than 15 ms, that's virtually nothing and sure enough, there is no visible indication that your timeline ever when forward at all. So what you're seeing is completely expected and normal behaviour. If you want your timeline to play from the end and then backwards, you could add a .progress(1) and then the .reverse() method: this.timeline = gsap.timeline() .to([this.f1back,this.logo], {duration: 1, xPercent: -100, z: 0.1, rotationZ: 0.01, force3D:true, transformPerspective: 1000, ease: 'none' }, "+=4") .from([this.f2back, this.f2copy1, this.f2copy2, this.ctaback, this.ctacopy, this.f2logo], {duration: 1, xPercent: 100, z: 0.1, rotationZ: 0.01, force3D:true, transformPerspective: 1000, ease: 'none' }, "-=1") .progress(1) .reverse(); Also in the code you posted there is a comma before the timeline instantiation, you might want to check that as well. Happy Tweening!!!
  22. Hi and welcome to the GreenSock forums. Sorry but your question is a little bit vague. What I can infer from the little information you're providing, perhaps the MorphSVG Plugin is what you're after: Check out the samples in there and the docs to see how it works: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin This is a Club GreenSock benefit, but if you want to take it for a test drive, you can use this codepen in order to play around with it: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!!!
  23. Hi, You should update your ScrollTrigger instances, once the collapse animation is completed, not when the state that triggers such animation has changed: const openState = { height: "auto", duration, onComplete() { ScrollTrigger.refresh(true); } }; const closedState = { duration, delay, height: 0, overflow: "hidden", onComplete() { ScrollTrigger.refresh(true); } }; React.useEffect(() => { if (isCollapsed) { gsap.to(ref.current, closedState); } else { gsap.to(ref.current, openState); } }, [isCollapsed]); Happy Tweening!!!
  24. Hi and welcome to the GreenSock forums. Please create a live reduced sample in Codepen in order to see what you're trying to do. The website you post is quite complex and requires a lot of coding to achieve that, so is not the easiest task. Please have a look at this post: Happy Tweening!!!
  25. That depends, keep in mind that any time you navigate to a page in Nuxt, Vue will trigger all the component's life cycle hooks, so you'll create the GSAP instances again, so there is no need to set their progress to 0 and play them, just use the same approach you've been using so far to create them and have them running. The reason for pausing the animations before killing them is just a personal preference, that's it. Happy Tweening!!!
×