Jump to content
GreenSock

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

PointC last won the day on May 20

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,844
  • Joined

  • Last visited

  • Days Won

    392

Posts posted by PointC

  1. I'd echo Jack and Cassie's thoughts from above.

     

    Definitely a nice idea @Eunomiac, but I wouldn't want to see a bunch of unanswered logic questions. There are active community members answering questions around here, but by and large, most are answered by Admins/Mods so I'm not sure many people would jump on the 3rd party, logic type questions. Most of us on the GSAP team wouldn't really have time either. That's pretty much the main problem. We're all trying to get all the GSAP related questions answered so diving deep into other code is a bit of a stretch. Most of the Mods are volunteers and have full-time jobs too so it's a balancing act.

     

    2 hours ago, Cassie said:

    See if you can give a go at answering some unanswered questions here in the forums.

    That's some of the best advice you can get. Helping others is how I learned GSAP and probably 50%+ of what I know about vanilla JS. You'd be amazed how much you'll learn just by answering some questions. You might make a few mistakes (I made many), but that's how we learn.

     

    All the best and happy tweening to everyone.

    :)

     

    • Like 2
  2. Sure, you can start from a central point. For that you'd want to animate the cx/cy attributes of each circle. I just hard coded the values in my fork, but there are other ways to get the correct position too. Here's a fork with that update.

     

    See the Pen 524ac72daf0762b035d3f47cccc5d427 by PointC (@PointC) on CodePen

     

    A couple other notes.

    I added all the tweens to a timeline. That way you don't need the delay on any of them and the bowl fade-in will happen after the marbles finish their animation.

    The opacity tween isn't doing anything here. When you use a from tween, that is saying "hey, animate from this position/opacity to my current position/ opacity". Since the opacity is already 1, from 1 → 1 won't actually show anything. I changed it to from 0 in my fork so you could see the difference.

     

    Hopefully that helps. Happy tweening.

    :) 

    • Like 2
  3. Just to clarify. I don't want to discourage you from trying wild and crazy things. Go for it. :)

     

    I've just seen a lot of people try complicated animations right out of the gate and then get frustrated when things don't 'click' and abandon GSAP altogether. We want to encourage everyone in the community to stick with it and we're here to help with any and all GSAP related questions and problems.

     

    Happy tweening.

    :)

    • Like 1
  4. Hi @aaron4osu

     

    Welcome to the forum.

     

    If this project is a bit overwhelming, I'd suggest going to the Learning Center and starting a bit smaller.

    That being said, you'd want to use a timeline and stagger to achieve the emptying of each bowl. Here's a quick fork showing what I mean.

    See the Pen 5a996bf1d6d02a00fd9215ea71bab039 by PointC (@PointC) on CodePen

     

    Obviously the images are not hitting the target correctly (as you noted). That will mainly be a CSS issue. If you want to use divs like that, you'll need to make some calculations about how far away the middle bowl is and listen for resize events. Another option would be to place all of the elements in an SVG and then everything scales together so you can use hard coded values.

     

    If you want the final product to look exactly like the filled bowl, you may want to work backwards and use .from() tweens. Lots of options are possible, but as I mentioned, you may want to start with something a little easier after you've gone through the Learning Center.

     

    Happy tweening.

    :)

     

    • Like 2
  5. Hi @willdzoan31

     

    Welcome to the forum. :) 

     

    You are correct. That jump is because of the first tween.

     

    Some solutions:

    • Create your ScrollTrigger in a function that is called when the first tween completes.
    • Wrap your target in another element and scale that one in the ST tween.
    • Use a fromTo for the ScrollTrigger tween (1 → 4)

     

    That's my best advice without actually seeing the code in context with a minimal demo.

     

    Happy tweening 

    • Like 2
  6. Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow.

     

    Talented coders that feature a ton of GSAP:

    Cassie Evans: https://codepen.io/cassie-codes
    Blake Bowen: https://codepen.io/osublake
    Carl Schooff: https://codepen.io/snorkltv

    Pete Barr: https://codepen.io/petebarr

    Steve Gardner: https://codepen.io/ste-vg

    Ryan Mulligan: https://codepen.io/hexagoncircle

    Tom Miller: https://codepen.io/creativeocean

    Chris Gannon: https://codepen.io/chrisgannon

    Darin Senneff: https://codepen.io/dsenneff

    Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome 🤣)

     

    It may not be exactly what you need, but there should some good inspiration in those accounts.

     

    Happy tweening.

    :)

     

    • Like 2
  7. There are a few problems here.

    • Your trigger element (.hp-360) doesn't exist
    • There are several elements with CSS transitions
    • Your start and end are both set to "35% 70%", but you have scrub set to true

     

    If you decide which element should be the trigger and remove the CSS transitions on everything GSAP will be animating, I think you'll be good to go.

     

    Happy tweening.

    :)

     

    • Like 2
  8. Hi @Tanvi_Patel

     

    Welcome to the forum.

     

    The moving background is a series of seamless repeating SVGs. Here's a thread with seamless clouds using the same technique.

     

    The animated stag is a sprite sheet.

     That should get you pointed in the right direction.

     

    Also be sure to visit the Learning Center to help you get started.

    Happy tweening.

    :)

     

    • Like 2
    • Thanks 1
  9. Correct - the duration of a tween doesn't make much difference with scrub. It's all about ratios. Two 1 second tweens on a scrub timeline will be the same as two 10 second tweens on a timeline. (Each taking up 50% of the scroll distance) However, changing just one of them to 10 seconds will make a big difference.  Now, the 1 second tween is only taking up approximately 9% of the scroll distance while the 10 second one is take up approximately 91% because we have a total of 11 seconds.

     

    My personal preference is to use linear eases on scrub tweens/timelines, but yes you can certainly use a custom ease on a scrub tween if that's your preference. I'd say just give it a try and see what what works.

     

    Happy tweening.

    • Like 3
  10. I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. 

     

    The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity.

     

    Make sense?

     

    Happy tweening.

    :)

     

    • Like 2
×