Jump to content
GreenSock

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

OSUblake last won the day on September 22

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    7,062
  • Joined

  • Last visited

  • Days Won

    617

Posts posted by OSUblake

  1. 13 minutes ago, blizve0 said:

    The Very First Class Component named Particles()

    which is a Class Component and I am Not Able to Convert it.

     

    And that's not a component. It's just a normal JavaScript class and would work the same even if you didn't include React, so leave it as is. 

     

    A class component extends React.

    class MyComponent extends React.Component {
    
    }

     

    • Like 1
  2. My suggestion would be to keep it as a class. Don't break something that isn't broken. Function components just make animation code harder to follow and reason about. If you really want to continue forward, then I would suggest go through our React Guides first as they are mostly focused on function components. 

     

     

    • Like 1
  3. Welcome to forums @seungguini

     

    You should always create your timelines inside a hook. 

     

    // only need to use a ref if you are tring to access 
    // the master timeline elsewhere
    const masterTimeline = useRef();
    
    useLayoutEffect(() => {
      const introTimeline = gsap.timeline()
        .from(hiText.current, {
          y: "+=10",
          opacity: 0,
          duration: 1.5,
          ease: "power4.easeInOut",
        })
        .from(iAmAText.current, {
          y: "+=10",
          opacity: 0,
          duration: 1.5,
          ease: "power4.easeInOut",
        })
        .to(cursor.current, {
          opacity: 0,
          ease: "power0",
          repeat: -1,
          yoyo: true,
          repeatDelay: 0.5,
        });
    
      const occupationTimeline = gsap.timeline()
        .add(typeOccupation(occupation.current, "a CS Major", 1))
        .add(typeOccupation(occupation.current, "a Software Developer", 1))
        .add(typeOccupation(occupation.current, "a NLP Researcher", 1))
        .add(typeOccupation(occupation.current, "a Computer Science Tutor", 1))
        .repeat();
      
      masterTimeline.current = gsap.timeline({ paused: true })
        .add(introTimeline)
        .add(occupationTimeline);
      
      return () => masterTimeline.current.kill()
    }, [])

     

    Be sure to check out our React Guide for more details.

     

    • Like 1
  4. Every tween you have is calling doBackground. You need to add it conditionally like this.

     

    let vars = {duration:0.55, yPercent:100, stagger:0.03,ease:'power4.out'};
    if (index === 1) {
      vars.onComplete = doBackground;
    }
    
    tl.from(chars.chars, vars, ">-30%")

     

    Or you could just put the callback in your timeline.

    if (index === 1) {
      tl.add(doBackground)
    }

     

    • Like 4
    • Thanks 1
  5. Hi fionchadd

     

    Coordinates can be really confusing in SVG, so here's how to make this easier.

     

    Initially have your hat and drop area sitting in the top left corner, so their initial coordinates will be 0,0.

     

    Now use GSAP to position the hat and drop box.

     

    gsap.set("#hat", {
      x: 200,
      y: 200
    });
    
    gsap.set("#droparea", {
      x: 500,
      y: 100
    });

     

    Or even better, also have your items centered.

     

    gsap.set("#hat", {
      xPercent: -50,
      yPercent: -50,
      x: 200,
      y: 200
    });
    
    gsap.set("#droparea", {
      xPercent: -50,
      yPercent: -50,
      x: 500,
      y: 100
    });

     

    Now when you have a hit, just to move the hat to the coords you set for the drop area.

    gsap.to("#hat", {
      x: 500,
      y: 100
    })

     

     

    • Like 3
  6.  

    43 minutes ago, Wizard of Oz said:

    Is there a better way of doing the below? Currently I am just "ifing" all conditions everything and I assume that's not the best practise?

     

    I think you had the right idea with your timeLapse object. You can get the object using bracket notation

    let item = timeLapse[value]; 

     

    See the Pen QWgBeoG by GreenSock (@GreenSock) on CodePen

     

     

    • Like 1
  7. Welcome to forums @Grace Cho

     

    Performance ultimately comes down to graphics rendering and what you are telling the browser to change visually. The demo you posted doesn't even use GSAP. Safari just has a hard time handling some stuff. Not all browsers are created equally. If it's too much for a browser to handle, then you should tone down whatever you are doing, but it's impossible to say what that is because you didn't provide a minimal demo. Your JS is fine. But what we can't see what it's doing as there is HTML and CSS involved.

     

    • Like 4
  8. Welcome to forums @DRJO

     

    You can use the trial version of all our plugins on CodePen, CodeSandbox, etc. 

     

    image.png

     

     

    You should use a snap points function, and if the point isn't within a certain radius, return the point that was passed in. Otherwise, return the closest point. 

     

    snap: {
      points: function(point) {
        // now you can run whatever logic you want in here, like
        // looping through the other boxes to see which is closest 
        // and if it's within a certain distance, apply the snapping.
        // Just return the adjusted point with x/y properties or 
        // if it's not within the range, return the original point:
        return point;
      }
    }

     

    This thread should help give you some ideas. 

     

     

    • Like 2
  9. To make a motion path seem random, you can just make it really long with several loops, think of a swirl, but then have end connect to the start. The MotionPathHelper would be a good tool to help visualalize that, or you could just draw a path in a SVG editor.

     

    https://greensock.com/docs/v3/Plugins/MotionPathHelper

     

    For the flame, you can create another animation just for the flame, and maybe change its opacity using some sort of custom ease, like RoughEase or CustomWiggle.

     

    You could even add some rotation to the SVG to make it appear more random. Just a quick example I made using the MotionPathHelper.

     

    See the Pen YzQvBwy by GreenSock (@GreenSock) on CodePen

     

     

    • Like 4
  10. Hi Johnee!

     

    I'm very confused about what you're trying to do. If you're working gltf models, then keep PixiJS out of it. Pixi's pivot and anchor are just for Pixi display objects, and will be of no help with three.js.

     

    And that fiddle isn't even working for me, but just from reading the code, all it's doing is providing a texture for three. Nothing special, and can be done using regular canvas APIs.

     

    GSAP can animate whatever you want, but you need to figure out how to rotate your model the way you want in three.js first. Get the start and end states, and GSAP can fill in the rest.

     

×